Tutorial

• 

  Example List

• 

  Tutorial Logo

Inspiration

As a tutor, I often find it difficult to reach out to parents who specifically need a tutor who can cater to their child's needs. On the other hand, it has been difficult for my parents to find me a tutor for certain subjects without having already been connected to certain individuals. As such, I created Tutorial to provide an easy and convenient way for both tutors and clients looking for tutors to find and connect with each other. Tutorial provides various utilities that can greatly streamline the tutor finding process that makes it easier, less stressful and more like finding an item online - quick, easy, efficient.

Overall, Tutorial tries to simplify the process of finding and contacting tutors for its users. Without any barriers to entry, signup, ads, or paywall, Tutorial can help users find tutors in an appropriate and convenient way.

What it does

As such, I created Tutorial to provide an easy way to find and connect with potential tutors or clients. On Tutorial, you can easily access lists of prospective tutors/clients, with those individuals' contact information and relevant details. If you wish to connect with them and hire them, you can reach out to the email or contact info provided on their profile.

Users can navigate through a simple user interface and filter lists of tutors or clients by various parameters, including availability, subject, and whether they are available virtual/in-person. Creating a list is just as easy, with a simple process that allows users to create a listing with all relevant details within minutes. Only the necessary information is required - ZIP code to determine distance, rates, email for contact, and availability, for example. If users feel like they want to elaborate on their skills or needs, they can indicate it in the about section of their profile card.

How we built it

The frontend of Tutorial was built with React.js and Tailwind.css for visual features and web design. Much of the app's functionality comes from React's state management, which allows the app to dynamically change in a clean and visually appealing manner. This enabled me to easily build filters and selectors on the states. On the other hand, the backend of Tutorial is built with MongoDB and Express.js. To retrieve and add new listings of tutors/clients, the frontend communicates with a MongoDB database using HTTP requests handled by Axios and Mongoose.

Challenges we ran into

While I was building the backend component of the app, I ran into various issues with connecting to the backend server. I had to work out whether HTTP requests were never reaching the server, whether I had incorrect parameters for the objects being sent, etc. Additionally, while I was building the frontend section, I often had to correct my Tailwind classes to ensure that the app was looking like it was supposed to. Finally, I had to make the app look good on mobile devices as well, so I had to be code the site to be both responsive AND have the app completely change its behaviors at certain width breakpoints (referring to the width of the screen). Overall, while I ran into some errors and difficulties, the experience of checking Stack Overflow and the documentation of various libraries to try to resolve the issues was really encouraging and motivating.

Accomplishments that we're proud of

Overall, the site looks great and functions great as well on both desktop and mobile devices. The greatest accomplishment I had, though, was the experience of browsing through Stack Overflow and documentation for various libraries and finally resolving a crippling error. This project has honestly really excited me about what I can do and achieve with enough dedication, persistence and motivation.

What we learned

I became extremely familiar with Tailwind's classes throughout this project. I had to constantly adjust them to achieve a desirable look. I also learned more about Axios and working with MongoDB, especially concerning syntax, how MongoDB handles collections, etc.

What's next for Tutorial

Tutorial can improve by integrating additional features that help tutors/clients easily locate each other, like a map with interactive elements. Additionally, it could be helpful to allow tutors/clients directly upload details and information by file, making the process of creating a listing even simpler. By having more avenues of connectivity, Tutorial can do its job even better and make the process of finding a tutor even easier. Tutorial in its current state is complete, but it can be improved to accommodate even more types of students looking for work. Overall, I hope to make a big impact with Tutorial, and I can see its gradual refinement making an even bigger impact in the future.

Built With

• mongodb
• react
• tailwind.css