General Planner Project
Video Preview
Description
My first Full Stack project, a seemingly simple general planner where you can keep track of info, income, contacts, and users if your an Admin. This website has a frontend and backend each deployed separately using onRender. On logging in a user receives an access token that lets them access the website's protected routes and if their role is a user then they can only see their own content and nothing from other users. However, if the current user has the role of an admin they can see other user data and even create new users. Now a user upon logging in also receives a refresh token, so when their access token runs out they can get a new one, and when that refresh token runs out, then and only then will they be required to login again. The purpose of a refresh token is to implement persisted login, so if a user doesn't want to stay logged in for a long duration they can choose to opt out of persisted login and not receive a refresh token, this is helpful when using a computer you regularly don't use. Both the user and admin roles can create content and both can edit or delete their own content, but only the admin can edit or delete user content besides their own.
Tech Used
I mainly used React, Redux, CSS, Javascript, Node, Express, and MongoDB for this project. I took advantage of many useful npm packages, such as ones for encrypting passwords and creating cookies. I used Mongoose to simply working with MongoDB schemas. And in the frontend I used Redux to manage auth state and RTK query to communicate with my backend API. The login form I have uses Regex (Regular Expressions) for username and password validation. Unlike most of my recent projects, for this one I simply used pure CSS and my (at the time) poor design skills. For making the backend server API, I made use of the MVC design pattern, that is Model View Controller, simply put, I'd make my database model and abstract the API route logic in a controller which would then process API requests and this would typically make changes to the frontend or views, depending on the http request.
Key take away
This was a tough one, while making this application would be simple enough for me now and would likely only take me a week or two, when I made this website I didn't have any experience creating a full stack application and much less deploying it. Needless to say I was in tutorial hell making this project and drilling in my brain all the frontend and backend concepts to create this website until I finally understood those crucial concepts enough to make something remotely similar to what I was thinking of, this took me a little over a month to complete. This project was my hardest simply because I lacked so many crucial skills at the time of making it, likewise this project was crucial in my foundational knowledge for that very same reason, and while it isn't too responsive or very complex in terms of functionality for users, I believe this was my best project in terms of learning. It's helped me rethink my way of learning, that is to say I now believe learning should be challenging, out of the frying pan and into the fire, that's truly how you learn the best.