👋 Hey Folks

It's Nimalan here and I am here with my new app Momento: A productivity app that helps you to track the progress of the projects you are currently working. Its my submission for the Netlify x Hashnode hackathon.

💭 Flashback

I was developing an app last month and I even had no idea that the app would work. With hurdles, I still able to complete the app 70% and finally it was an utter waste. All these happened because of the lack of planning, preparation and time management. This made me think how could I go further!

💫 Inspiration

While suffering, I read these lines that inspired more to make my hands dirty in making Momento. Thanks Rutik Wankhade.

But you just can't think of an idea and jump directly working on it. The more clear the idea, the faster you can implement it. It's complicated you know. You might keep thinking about it and never build one. Or you can think about every detail of it, so you can build it efficiently.

💡Idea

As Hashnode announced the hackathon, I was seriously grinding every day to make an app that improves productivity while making projects. And, I had only four main aspects that are to be included in Momento.

1. Implementations
2. Resources
3. Spending Quality Time
4. Share your progress

🚵Challenges

"Either move on or stay still."

I like to face new challenges and solve it, and this hackathon made me learn ExpressJS for backend and MongoDB for database. Since, it was my first time learning both the technologies, it sometimes drew me mad but eventually I picked up. I took a lot of time in creating the UI, because choosing the theme and color palette itself destroyed my inner peace at the beginning😅, so I went for black and white theme.

📄Walkthrough

Home Page

I really wanted to make the app minimal and very simple with all clear cut goals. So, I avoided long paragraphs and images that describes the app and only included the app name and subtitles.

I used Firebase Auth for authentication. As of now, it has only Google Login but soon more social logins will be implemented.

Dashboard

Dashboard shows your current stats in using Momento, it shows the number of projects completed so far, total time spent while working in your projects and finally your rank in the leaderboard.

You can upload your profile image and also it allows you to share your progress on twitter.

Projects

Projects page shows the projects you are currently working on and allows you to create and delete projects. Each one shows the percentage of completion.

Create new projects simply naming a project.

What's inside each project?

Implementations

Implementations are things or features you are going to add to the project more or like a To-do-list. The completion status of the project depends on how many tasks completed so for. After a task has been implemented, check the checkbox to update the project status. When all the tasks are completed, the project will be 100% completed.

Adding new tasks and deleting existing tasks can be done.

Resources

Resources section contains all the bookmarks of the web pages or sites that you added when researching or planning for the project. It saves a lot of time while working because you will be able access it here easily without searching again in google. The resources added here are project specific. Copy the link or click to view the saved sites.

Timer

The timer is completely user's choice. Either start the timer and work with more focus or don't start the timer. After work, save the time for records and this adds up to the total time spent in dashboard. After timer has started, don't leave the current project page.

Pause the timer when you need a break.

Leaderboard

The leaderboard is the place where you celebrate yourself. All the users of Momento compete here to rank themselves first. The leaderboard ranks each user based on the number of projects he/she has completed. The main cause for this leaderboard is to make this app not only a productivity app but also a competitive app.

More the projects, More the score!

⚒️ Tech Stack

• React for Frontend
• Tailwind CSS for styling
• Node.js and Express.js for Backend
• Firebase for Authentication
• Axios for HTTP requests
• Framer Motion for animations and transitions
• MongoDB for database
• Netlify for frontend hosting
• Heroku for backend hosting

🧑‍💻Source Code

The complete source code of this app. Frontend / Backend

🔮Future Improvements

Currently, the app has only limited options and I am really excited to add more improvements such as,

• More social logins
• Viewing other's projects
• Chatting section for users
• A get help page

✨ Final Thoughts

Keeping coders in mind, I made this app and I hope it really turned out well.

As every developer says, the more projects you make, the more you learn!

So, I suggest you to use Momento which helps you to work easier and faster in your projects. If you are a guy who likes to be more productive, then Momento is one of the apps you are looking for. Thank you for reading this article and I hope you liked the app.

Thank you #Netlify and #Hashnode for conducting this awesome hackathon.

Please let me know your feedbacks or suggestions in the comments! ✉️

Happy Coding! 🚀#NetlifyHackthon