Students to Students Tutoring Website

Home Page - Title
Home Page - About
Home Page - Steps
Courses Page
Course Page - View Details
Course Page - Search and Filter
Events Page
Calendar Page
Contact Us Page
Home Page - In Chinese
Course Page - In Chinese
Calendar Page - In Chinese

Fun Fact: this website is currently being used by the organization!

Inspiration

We have been tutoring at Students to Students Tutoring for almost a year now, teaching topics such as Video Editing and Intro to HTML/CSS/JavaScript. This local organization mainly targets students in the Chinese community and is currently run on a Chinese messaging app (WeChat). That is, all advertising, information distribution, and announcements happen in a group chat containing the parents of all the students. Because of this, the organizers find themselves constantly repeating the same information and being asked the same questions by parents who are interested, as they do not have some type of information hub. We suggested to the organizer that they should have a website and volunteered to create it, which they happily agreed to.

What it does

We created a 5-page website for the organization that contains all the information that an interested student/parent needs to know to get started. The main feature of the website is the Courses page, which contains information on all the courses provided by the organization. A search bar has been implemented to easily search for a specific course and a “Grade Level” filter can be used to find courses that match the grade level of the student (Grades 1 to 12). Other pages include Home, where the main information is displayed; Events, where information about upcoming seminars and events are shown; Calendar, where a Google Calendar displays the timeslots of every class and seminar; and Contact, where the organization’s contact information can be found. In addition, the website is responsive; it perfectly displays on any device, whether it is a desktop, an iPad, or a mobile phone. Another notable feature is the languages feature, which allows all the content of the website to be in either English or Chinese.

How we built it

We used:

ReactJS (front-end JavaScript library)
NextJS (React framework for server-side rendering)
Material UI (React UI library)
SASS/CSS
Cloud Firestore Database (database to store information on Courses and Events)
Vercel (to host the website)
Git (source code management)

Challenges we ran into

Some challenges include:

Slow loading time for the Courses page (since lots of information is pulled from the database) → this was eventually solved by converting from server-side rendering to static site generation, which fetches the data and pre-generates HTML pages on the server and caches it
Making the website mobile-friendly (which was done using the CSS flex property)

Accomplishments that we are proud of

We are proud of:

Making a website completely responsive to any screen size
Helping out an organization that I love working at
Having a website that is can be read in both English and Chinses (using the languages feature)
Creating this website in the span of 1 week

What we learned

We learned:

How to use Next JS (first time)
How to utilize Material UI (first time)
How to work with a client (in this case, is it the organizer of Students to Students Tutoring)
How time-consuming it is to make a fully responsive website

What's next for Students to Students Tutoring Website

Many additional features can be implemented:

An authorization page for tutors and tutees to access different features of the website
A basic form feature to add a student to a course
A page to rate tutors
An admin page for organizers to add courses and events directly to the website for easy use
A page containing information on the tutors