A tutor-booking web app (with PWA support).
- Websitehttps://tutoro-nicktaykey.vercel.app/
- Githubhttps://github.com/NickTaykey/tutoro
- StackNextJS, ReactJS, Typescript, MongoDB, Chakra UI
Tutoro is a website and a PWA which enables students to book tutoring sessions and to have their homework reviewed by qualified tutors.
PWA stands for progressive web application. They are websites which can be saved on any device and used offline as native apps. This technology enables web developers to create web apps which can become mobile, desktop and tablet ready.
PWA stands for progressive web application. They are websites which can be saved on any device and used offline as native apps. This technology enables web developers to create web apps which can become mobile, desktop and tablet ready.
I wanted to build a fairly complex web project which could test my development skills by pushing me outside of that comfort zone which you feel when you learn through online courses. I knew I wasn't going to build something "production-ready", but a working prototype of an idea also known as MVP in the startup world. By knowing this from the beginning I was able to overcome many obstacles which made the development harder (such as dealing with bugs for days and impostor syndrome).
I chose to develop a tutor-booking app for personal reasons. During high school, I always struggled in scientific subjects (especially maths and physics) so I really felt the need of having a tutor who could explain these subjects to me in a simpler way. I do believe that if I had had a service like Tutoro (which I haven't found yet) my life would have been much easier at school. In conclusion I tried to solve a problem of mine (which probably affects many other people as well) by creating a solution leveraging my software development skills.
- I learned NextJS, Typescript and Chakra UI all by doing this project, in fact, when I got started I had basic knowledge of HTML, CSS, JS and React. I did many researches and found out that NextJS with Typescript and ChakraUI is one the best stack to develop a project like this (especially as a solo developer). I cannot say that I mastered these technologies, in fact, I still have a lot to learn, but I learned to learn by developing. This improved my confidence a lot.
- I expanded my knowledge about Git and Github (especially about those weird commands like rebase, cherrypick and stash) which isn't explained in most online courses. Moreover, I learned how to organize my Git workflow using feature branches. I still have a lot to learn about version control systems and I will in my next internships and projects.
- I mastered many Javascript features (ie: promises, error handling and built-in data structures). Moreover, I developed a better debugging and problem solving approach. I also realized how amazing Typescript is (because of code autocompletion and bug prevention).
- I explored several advanced features of MongoDB (ie indexes, geospatial queries and population strategies). Moreover, I learned how to integrate Typescript and MongoDB for data modelling.
- I learned how to integrate Mapbox with any React project using ReactMapGL (a library developed by Uber to integrate React and Mapbox).
- Lastly, I integrated credit card payments using Stripe.
- I realized that when you build side projects the highest priority is to make the idea work. This means creating a basic prototype of the idea, without worrying about scalability, tests and performances.
- "Smaller is better", when developing side projects It's better to develop an intuitive and good looking prototype rather than a big project. In fact, smaller apps have more potential to impress who look at them because they are easier to use. This is something which I didn't know while developing Tutoro. In fact, I quit the project because the codebase was growing too much, becoming too difficult to maintain. So I wish I knew this fact, when I got started.
- "If you want to go far, go together", generally speaking side projects don't become online businesses because even if they have potential, it's very difficult to turn them into online businesses by being (only) a developer. In fact, the skill set required to build a successful online company goes beyond software development. I realized this only by developing Tutoro and becoming aware of the non-technical aspects behind the development of an online company.
- I started small by displaying some markers on a map (locations of random generated tutor-users). Then, I added search and filter features for tutors displayed on the map. By implementing these features, I gained a lot of experience at dealing with maps in React projects, solving many integration bugs in ReactMapGL.
- I implemented User reviews. On the front-end, I learned how to use Typescript when creating React components. On the back-end, I learned how to refact NextJS API routes using middleware and the next-connect library.
- After having implemented reviews, I designed the Session model which enables users to book tutoring sessions. By implementing it, I learned how to create MongoDB data models whose instances have a status property. This property makes the UI update according to the status of each Session instance (this can be approved, not approved or rejected). This step didn't involve particularly complex MongoDB concepts, but I found it challenging because I had to design the model from scratch. I didn't find any online resource which explained the proper way to design this sort of model.
- Next, I implemented authentication using next-auth a library which makes authentication easier to handle in NextJS. I chose to use Google OAuth as the only authentication strategy because I didn't want to handle passwords and I wanted to make the authentication process as smooth as possible.
- After having added authentication, I implemented Posts which allows users to send direct questions to tutors. The most complex aspect of implementing this feature was about handling file uploads. In fact, because Vercel (NextJS best hosting provider) uses serverless functions to host API routes and they don't allow file storage. So, I had to use a service called Cloudinary to host files in the cloud.
- Once I had the core features implemented, I styled the UI using Chakra, I started with styling the UI with the default theme (figuring out the various components as I needed them). Then I customized the default theme and implemented dark and light mode.
- The most complex feature of Tutoro is the real time view of sessions and posts status. In fact, Vercel doesn't support web sockets so I had to find a real time communications provider, which fit Vercel restrictions, I used Ably and after having solved many bugs and integration issues I was able to implement real time update of Session and Post models.
- Lastly, I integrated Stripe and added the checkout page in the session booking flow. Moreover, I configured NextJS using Next PWA to serve a PWA.
- I chose Vercel (and not other free providers such as Netlify or Heroku) to host this fullstack app because this is the most performant provider to host NextJS projects. It serves the pages of the website as static and server-side rendered pages, to achieve excellent loading performances. The API routes are hosted as serverless functions, invoked just when needed by an incoming http request, providing more scalability for the whole service.
- To host the Database I went for Mongo Atlas a cloud based solution for hosting MongoDB databases which offers a free trial.