COVID-19, we can all agree, that it has been arguably one of the hardest and most bizarre moments in our lives. Isolation at home, finding a balance between work and life, and a foggy, uncertain future. For me as a student, the messes of online learning, the abundance of fast-approaching deadlines, and a lack of motivation have made this period a time of chaos and confusion. When our class schedule for the next school year released a few months into the pandemic—with the hopeful anticipation that the pandemic would be over; alas, it was not—my social media was flooded with friends posting their schedules and asking who shared classes with them. As I responded to each person, comparing my classes with theirs to see which I share, I imagined the multitude of messages the recipient will get from everyone responding, let alone the extra efforts of keeping track of who’s in which class. The process just did not seem efficient, and so I thought to myself, “can I make something to simplify this process and make it easier for everyone?” My first instinct was to create a website; I have been interested in web development ever since I created my first website on Wix for a school project. This was the perfect opportunity for me to use whatever skills I had, on a powerful platform, to make something easier for my school community. From there, the project took off. I wanted to point out that this article will be focused more around my creation process. I had lots of help from the Velo forums (they’re great, check it out!), but if there is interest, I can try writing a more concise step-by-step guide. Method I knew straight away that this project will involve much more than just design, so I started looking into by Wix. Although I haven’t used it before, the custom code functionality Velo offers seemed suitable for my project, and so I began exploring how to use Wix and Velo together for this project. I came up with this following outline: Velo One of the requirements for this project was that . I didn’t want anyone being able to piggyback on other people’s contributions without contributing themselves. Member Restrictions: only people who contribute their schedule could view other people’s schedules This meant that I would have to create a custom to prevent anyone from signing up themselves, but also that I would need to create accounts for members manually. I don’t mind the extra labour, but this is something that I can improve on (see ). Velo login page Final Thoughts A typical flow for someone who has contributed their schedule begins on the page, then once they , would either reach the page or the page. Member Workflow: Home login Schedules My Schedules This will be where the bulk of Velo functionality comes into play. For each block of the school day, I will have a dropdown populated from a database where students can choose a class to view, which would auto-update the classmates through Velo. For the My Schedule page, the student’s classes will be already filled with their classmates. Schedule and My Schedule page: I’ll touch on each of these pages in this story, but feel free to explore and follow along with this demo website I made: . https://ericssites.wixsite.com/demo The Pages Home Page Two things I really love about Wix: the plethora of templates to choose from, and the drag-and-drop Editor. For me, I really have to see an idea in front of me in order to believe it, and the Editor enables me to do just that. I began by going through some of the pre-made templates and ended up choosing this theme: the large hero strip alongside the bold, clean font stood out to me, and from there I started to add my own touch to it. Fitness Trainer The hero strip consists of two call-to-action buttons, one to login and one that directs the user to the section. Directly underneath the hero is the section, alongside some statistics of the website. The and sections follow. Contribute About Contribute Contact The home page is where the bulk of my website design comes into play. With inspiration from design ideas online, I shaped my thoughts into reality using Wix. I went for a minimal and clean design, with each section separated by large headers. Wix made it really easy for me to make pixel-perfect edits with the drag-and-drop editor and easy customization; with my minimal web development knowledge I would never have dreamed of creating anything like this! Login Page Design-wise, the login page is quite simple: I used a lightbox that would overlay on top of the home page. This is the first area where Velo is present: it is used to send backend requests for logging in, applying the user token, and verifying the reCAPTCHA. How to implement this was all foreign to me at first, but the Velo API Reference Guide and some tutorials online (like and ) really helped me out! this one from Wix this one from Code Queen Schedules and My Schedules Page Here comes the fun stuff: the actual presentation of the schedules! The end goal was to enable the user to select a course from a dropdown to see the students in that class. Even before hopping into the design, I started exploring linking the Velo API with Wix databases to ensure that they work for my needs. After some ups and downs and lots of experimentation, I was able to work with multi-reference fields to link a class name with its block and its students, and use this structure to communicate with the Velo API. Although I had difficulties throughout, such as getting the dropdown to work or , I had lots of help from the Velo Forums that kept me going. finding a way to query multi-reference fields Although I won’t link my entire code because of how messy it is (I need to work on my effective programming skills 😅), let me walk you through what the main portion does. We start with a , which pulls data from the to create a for each block scheduled in the school year. repeater Blocks database repeater item Each then pulls data from the filtering only for classes during its period (i.e. the Block 1 item takes courses with a Block 1 tag, and so forth). This gets populated into a dropdown. repeater item Courses database, When a dropdown is changed by the user, an event handler fires. export function courseDropdown_change(event) {
    let $item = $w.at(event.context); // Determine which dropdown was clicked
    let selectedCourse = $item("#courseDropdown").value; // grab the value of the dropdown (the course selected)
    let selectedBlock = $item("#Blocks").getCurrentItem(); // then grab the current block from the item selected
    let selectedBlockID = selectedBlock["_id"]; // keep only ID It starts by storing the course name from the dropdown and the block selected from the event caller. let queryForID = wixData.query("Courses") // query the Courses database
        .eq("courseName", selectedCourse) // for the course name
        .eq("blocks", selectedBlockID) // and the block of the course
        .find()
        .then((resultsID) => {
            let courseID = resultsID.items[0]._id // set courseID to the ID of the course found from the query Then the code queries the Courses database through to get the ID of the course. This is required in the next step, albeit a little bit messy. queryReferenced() wixData.queryReferenced("Courses", courseID, "students") // Query the courses database for the ID and return the students column Once the course ID is retrieved, another is called to retrieve all the students from the Courses database. Although allows us to get values from multi-reference columns (which we need to get the students), it requires an ID to query first (which we got from the previous step) queryReferenced() queryReferenced() .then((results) => {
                    let studentsCombined = results.items.map(_ => _.title) // map all the values but keep only title (name)
                    studentsCombined = studentsCombined.map(title => title.replace(" ", " "))  // do some cleanup
                    studentsCombined = studentsCombined.sort().join(', ') 
                    $item("#classmatesText").text = studentsCombined; // Modify text to the students
                })
        });
} The resulting data is cleaned up, keeping only the names of each student from the result and joining names with commas. Then, a text object is updated with the result, and the classmates are shown! A loader GIF appears while this process happens so the user knows something is happening. A similar process is present for the page, except the dropdowns are replaced by text objects and an additional filter is applied so that only the current member’s courses show up. The member’s classmates also automatically update once the databases load. My Schedules Final Thoughts on Wix and Velo This was not the first time that I used Wix; I have used it a few times for some school projects. However, every time I decide to create a website, I always come back to Wix: the drag-and-drop editor, the plethora of designs and addable objects, and the no-thought hosting make it so easy for me to choose Wix over other tools. For this project, I have also come to appreciate the cleanliness of the database editor as well as the versatility and functionality brought by Velo. I have however, come across a few hiccups when using Wix, primarily regarding speed. The Editor would sometimes be slow or unresponsive (even on a blank canvas), and sometimes I would lose changes or had trouble making changes due the Editor being unresponsive. Though, throughout building the website there have been some noticeable speed improvements by Wix; and Editor X, the new product by Wix, has felt very responsive when I tried it out. For someone wanting to quickly create a website or web app, or someone who needs to see something to believe it, I strongly suggest Wix! There’s always room for improvement I admit, when I was creating this website, I was often looking for the quickest way out of problems. Although I understood the code I was writing, I often made quick compromises, leaving lots of room to make the code more efficient or to remove unnecessary steps. Restructuring the databases might enable me to speed up load times for the website. Having a dynamic database connected to Wix from the form where I collect responses, instead of having to manually parse through my classmates’ schedules, would help reduce the amount of manual labour I have to do. Nonetheless, I’m really happy that I have a working site that gets the job done, and these improvements are things I can note in future projects! And that’s it! Thank you Wix and Velo for allowing me to make my ideas into reality, and thank you HackerNoon for this amazing opportunity to share my story. I’d also like to thank my friends also for supporting me through this journey, and you especially for reading my story. Maybe the pandemic wasn’t all bad. This article is part of a writing contest hosted by Hacker Noon in partnership with Wix. Learn how to and take a shot at winning $2000. enter here

Flow

Alongside

YouTube

2021 - HackerNoon Contributor of the Year - EDUCATION

2022 - HackerNoon Contributor of the Year - Education

Nominated for 2022 - HackerNoon Contributor of the Year - Education

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Building a Website to View Classmates: My Journey with Wix and Velo

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

AppleiPad556

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Building a Website to View Classmates: My Journey with Wix and Velo

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

AppleiPad556

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES