[DAY 118-122] I learned full-stack by building my 2nd app
As a self-taught developer, one of the best ways to improve my skills is by building. Recently, I completed my 2nd full-stack app that manages tasks with user authentication.
The app I built is designed for authenticated users to create, edit, and manage their daily tasks. It’s a full-stack project built with the MERN stack: MongoDB, Express, React, and Node.js.
In this project, once a user registers, they can log in and their credentials are authenticated through a token system. This token is validated by a backend middleware, ensuring that only authenticated users can interact with the application.
The validateToken middleware verifies the token, and if it’s correct, it allows the user to proceed; otherwise, it denies access.
Although the CSS for the frontend is not fully finished yet, the backend and the database are 100% complete. The next step is to refine the design and improve the user interface.
One of the most important features of the app is task management. Users can register, log in, and then create tasks that are displayed based on selected dates. The tasks can be modified and deleted as needed.
For instance, if I create a task at 5 p.m., I can later modify the time, date, task name, or even delete it altogether. The tasks are organized and displayed starting from the earliest time of day to the latest time of day.
I also implemented previous and next buttons, allowing users to navigate between tasks. When there are more than seven tasks, they are grouped into pages, and the tasks are automatically sorted across multiple pages.
Another key feature is the logout function. Once logged out, the token is removed, and the user is redirected to the login page. This ensures that unauthorized users cannot access the task management area without valid login credentials.
In the backend, I’ve structured the app so that only the user who created the tasks can access and manage them. This was achieved by associating each task with a user ID in the MongoDB, making sure that tasks remain private to the user who created them.
The user model I created also ensures that email addresses are unique, preventing the creation of duplicate accounts.
The application consists of several components:
The dashboard consists of the interactive calendar and the task components:
task form for creating tasks
task modal for deleting and editing tasks
The login, register, and forgot password components.
The private route component to ensure that certain parts of the application, like the dashboard, are only accessible to authenticated users. This was done using middleware to validate tokens before allowing access to these private routes.
On the backend, I used Mongoose to integrate MongoDB as the database. The routes are protected by the middleware, ensuring that only authenticated users can create, read, update, or delete tasks.
While I’m pleased with the progress I’ve made, there’s still work to be done. The frontend CSS is still incomplete, and I plan to refine the design in the near future.
However, I’m already thinking ahead to my next project. My next goal is to build a contact management app with user login functionality. This will be another full-stack project where I continue practicing my skills in creating user-specific content.
The reason I’m building these apps is to practice the core logic, patterns, and concepts of the MERN stack.
By repeating similar types of projects, I’m becoming comfortable with the entire development process from setting up the database to creating secure backends and responsive frontends.
Every project helps me practice my skills and prepare for more complex apps in the future.
Anyways, that’s all for now. More updates in my next blog! See you there!