This is one of the many projects available on codedamn to reinforce your learning by building. If you want to become a full stack developer and learn by practicing, feel free to attempt this challenge. Feel free to check out the codedamn Full Stack Web Development Learning Path to learn more about how to become an awesome full stack developer.
You have to create an application that allows people to manage their Todo's
The application should take care of the following aspects:
- Registeration / Login for users, all user data should be persisted in a database (mongodb in this case).
- Users should be able to Create, Read, Update and delete their todos from the UI.
- All todos data should be persisted in database for each user.
The is no landing page structure, you are free to make a small landing page based on the topic of the project and the page should contain the links for login and registration
The registration functionality should be implemented at /register route.
This should contain the user details, refer to the user document for the details to be collected.
The login functionality should be implemented in the /login route.
On Successful submission of credentials you have to create and store a JWT token in localStorage for handling the authentication. Every request to the api should share the JWT token to verify the identity of the user, before returning any response.
All the available todos for the logged in user should be shown on / page and the user should be able to manage their todos from here.
To verify the user credentials on Sign In, taking the parameters as email and the password
To register a new user and add the document to the database
This should return all the todos for the logged in user.
This api should add a todo to the todos document in the database.
This Endpoint should be used to update todos. For eg. for editing the todos title, or marking the todo as complete.
This should remove the todo for the logged in user. Note verify in backend that the todo to be deleted is actually owned by the logged in user.
{
"_id": randomly auto-generated _id by mongodb,
"name": "User's name",
"email": "user@email.com",
"password: string (store it as hash using bcrypt)
}
{
"_id": randomly auto-generated _id by mongodb,
"title": "bring milk",
"userid": user documents _id field,
"done": false (this should be a boolean value, and should be false when the user creates the todo),
"time": date object
}
The Codedamn Playgrounds exposes only 1337 and 1338 ports on the internet. So you'll be using localhost for connecting to the mongodb instance as they are hosted on the same docker container. You can specify it as localhost:27017 or simple write localhost.
- Mongoose for mongodb object modelling and effective type system
- Tailwind CSS for User Interface
@mui/icons-material. You can use their website to pick up icons for the project.
There is no restriction for using mui, you can free to choose any other icons for your project.
Your challenge is to build out this project and get it looking as close to the design as possible or take it up a notch and surprise us.
You can use any tools or technologies you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
Your project should:
- Be responsive for desktop and mobile phones
- Have minimum functionalities and effects working
Want some support on the challenge? Join our discord community and ask questions in the #general channel.
There is no limit you can go beyond the mentioned criteria and create additional functionalities
Your task is to build out the project as per the provided screenshots. You will find both a mobile and a desktop version of the design.
The designs are in image formats can be found in /designs.
You will find all the required required images in the /public folder
There is also a style-guide.html file containing the information you'll need, such as color palette and font names. Make sure to open this in the browser to see the contents.
- You can build OAuth2 for Sign In and Registration
- Creating the network page and having Connections
We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please visit codedamn feedback page# todo-app-fullstack