heatmap.mov
Node, Express, MongoDB, EJS, Javascript, HTML & CSS - Track and celebrate the completion of user's daily tasks with a GitHub-style heatmap!
Link to app
A calendar heatmap showing how many tasks the user completed on each day. I customized mine to be a 100devs daily task tracker.
Be sure to add that lovely star 😀 and fork it for your own copy
- It's a 100-hour project created to understand how MVC concept and logins are added, as well how to take advantage of MongoDB and ejs to present and modify data to provide great UI/UX.
🌟 User can register and log in to view, create, edit and delete their daily entry of tasks
🌟 User get to see a heatmap showing all dates start 9 months ago
🌟 User can do a quick add, or click on the last square(today) to log today's assignments
🌟 Use can hover over each square to see the date and number of tasks completed
🌟 When clicking on a square, a popup window will appear showing which tasks have been checked off. The user can update or delete the entry
- It's for beginners & intermediates with little more experience, to help understand the various aspects of building a node app with some complex features
bcrypt, connect-mongo, dotenv, ejs, express, express-flash, express-session, mongodb, mongoose, morgan, nodemon, passport, passport-local, validator
npm install
- Create a
.envfile and add the following askey=value- PORT: 1000 (can be any port example: 3000)
- DB_STRING=
your database URI
Have fun testing and improving it! 😎
- Leon(100devs)'s todo-mvc-auth-local code base: https://github.com/100devs/todo-mvc-auth-local
- Bianca's amazing mood-tracker app: https://github.com/bytesbybianca/mood-tracker
- Mayanwolfe's streams/vods on mvc and user authentication: https://www.twitch.tv/mayanwolfe
- 100devs: https://leonnoel.com/100devs/