Anchored banner

Anchored

16 devlogs
85h 10m 30s

Anchored is a website for productive people. To put it simply it's a habit tracker. It has an animation home page, a working login and signup page and mainly a place to tracker you habits and see your progress. This website is one of my biggest pr…

Anchored is a website for productive people. To put it simply it’s a habit tracker. It has an animation home page, a working login and signup page and mainly a place to tracker you habits and see your progress. This website is one of my biggest project.

Demo Repository

Loading README...

Sam

I shipped my website and it got rejected. I had deployed my frontend and backend on different URLs. I deployed the website on onrender.com which deploys website in a sub-domain. Due to which the cookie were not being stored properly leading to display no token provided. Now both frontend and backend are served by the same sub-domain. Ig now i’ll ship without issues.

Attachment
0
Sam

Shipped this project!

Hours: 84.2
Cookies: 🍪 1713
Multiplier: 20.34 cookies/hr

Anchored is a website for productive people. To put it simply it’s a habit tracker. It has an animation home page, a working login and signup page and mainly a place to tracker you habits and see your progress. This website is one of my biggest project.

Features

  • Animated home page
  • Authentication
  • Create, edit and delete habits
  • Github contribution like chart
  • Line chart
  • Responsive design

Learnings

  • Working with charts
  • Better understanding of gsap
  • Better understading of dates
  • More comfortable using javascript methods

The one this I am most proud of is the progress charts.

Sam

This website is now finally complete finally. This website took a long time to build and has mentally exhausted me in a good way. I just saw some bugs and fixed it.I have also added a favicon to this website. I have deployed this website on onrender. Now I’m going to write the readme file.

Attachment
Attachment
0
Sam

This might be the final devlog ig. I have worked on this worked for more than 80 hours. I think now is the right time to end this project and deploy it on the internet. I’m planning to make a new website now but I don’t know what it will be. For the last devlog I have made the habits page and progress page fully responsive. I have tested the website and found many bugs so I have fixed them. If I don’t find anything to work on tommorrow then I will deploy this website and work on another project.

Attachment
Attachment
Attachment
Attachment
Attachment
0
Sam

😭😭I forget to devlog everytime. Firstly I have worked on my home page. It is now complete🎉. Then I made the home page responsive. I took some time to make the home page reponsive due to the svg animation not aligning as I wanted but it worked out in the end. Then I thought why not make the auth page responsive. So I’ve made the auth page responsive as well. Thought most of the functionalities have been completed so I started polishing the ui. I changed the checkbox to a custom button with a little glow effect. Added some small changes like logout button closing if user clicks anywhere expect the button. Removed notify input from the dialog. As I thought it wouldn’t be necessary and had found an unexpected bug where the card was disappering when checking the habit. And that’s all for today’s devlog. Now I will be making the habits page responsive.

Attachment
Attachment
Attachment
Attachment
Attachment
Attachment
0
Sam

My exams are finished!! Now I will be able to work on my project more. Some exciting changes have been made since the last time. I have switched package from react-github-calendar to react-heat-map. The new github like calendar is fully functional. A new select button is added which allows the user to see weekly and monthly progress in the line graph. I made ui line graph much better. Now, I’m currently working on the home page. Hopefully it turns out great. Until then peace✌.

Attachment
Attachment
Attachment
Attachment
0
Sam

It took so many days to write this devlog simply because I forgot and I have my exams going rn. Due to exams I cannot focus on my project fully and also ended my streak in hackatime which was around 30 days. This devlog doesn’t have too much special changes. One major change is I have added transition during page change from home to auth. Most of the time was spent on fixing bugs. Right now I am currently working on adding a github contribution like chart in progress. I also worked a little bit on a svg animation inspired by mindmarket. Tomorrow is my final exam. Hopefully after the exams I will be able to give me fullest to the project.

Attachment
Attachment
Attachment
0
Sam

New Devlog !!! 🎉 Forgot to devlog before so now I have 7h 35m of work to show💀. I though I had no much to show but when I checked the commit messages I realized that I have done some decent work in this 7h 35m. Right now I have exams and it’s hard to manage both coding and study but somehow managing to do it till now. Now on to the progress Firstly I made the delete and edit button work. Added backend routes and controllers to handle them. When editing the same dialog box will appear with data of the habit you have selected. Found a bug where the email in the sidebar was not showing during signup. Fixed that myself (Very Proud 😁). The border animation was lagging in the sidebar. Later, I found out it’s because of the charts, they were taking all the processing and made the gsap animation look very laggy. So, I changed the gsap animation to css transition. This made the animation very smooth. Also fixed a small bug during signup. The biggest and most proud part of this devlog is streaks. The streak looks really nice and has a very good functionality wise also. Right now the streak calculates in the backend and the frontend doesn’t update immediately. I might change this in the future and make the calculation of streak in the frontend. Now I’m probably going to work on smooth animated transitions during change in page. I think it will look very cool. If someone did read this devlog upto here. (You’re the best ♥)

Attachment
Attachment
1

Comments

Ehab
Ehab about 2 months ago

Impressive work! Looks great!

Sam

Nothing much has changed in this Devlog. The main thing changed is that the top 3 priorities section’s data is saved in the backend. I worked on the backend route and controller for the priorities. This ended up taking much more time than I anticipated. I also fixed some minor errors during the process. Now I’m currently working on the three dots you see on the image which allows user to edit and delete the habit. Any suggestion in the comment will be appreciated. I’m gonna go and work on it rn…

Attachment
0
Sam

The website is coming together beautifully. I have synced the data with the progress bar and I’ve added a component displayed when there’s no habit. Also, I saw a notion habit tracker video and there was a circular progress bar at the end of each habit. This inspired me to add that in my own website. Now if the user spam clicks the checkbox it won’t overload the backend. This was a new thing to learn. I also fixed some ui issue with the dialog box. The days are going so quickly. I do feel low sometimes but thankfully I am able to continue to work on this.

Attachment
Attachment
0
Sam

Right now I am stuck now. I really love the progress chart and the animation of the chart when first loaded is just chef’s kiss. Now I am going to sync the real with the chart.

Attachment
1

Comments

chefpenguino
chefpenguino 2 months ago

love the way this looks, good stuff!

Sam

The data of the check boxes persist now. I’ve worked on the mainly the backed and created routes and controller to handle fetching and updating the completed dates. The completed dates then show in the form of the checkboxes remaining checked even after reloading the page. This process came with some annoying bugs but it worked out in the end. Now I will try to combat my fear and work on the progress page. I haven’t made a dashboard till now. I have already though of how the progress chart will look now it’s just the matter of coding. Wish me all the best…

Attachment
0
Sam

Damn!! I should devlog more often. Let’s see what i’ve done in these 10h 22m of work. Mainly I’ve worked on the ui of the habits page. User can track good or bad habits. I’ve also added a section for top 3 priorities of the day. In the sidebar i’ve connected the user’s email that i forgot to do previously. I’ve also created a dialog box that pops up when the user clicks on the new button. The one thing i’m most proud of is the emoji selector. It just worked without much hassle. Now currently i’m working on storing the habits data cuz the habits that’s being display right now is hardcoded. I really want to write more code daily but life is busy hopefully I can code more without having a breakdown.

Attachment
Attachment
Attachment
0
Sam

I don’t know how it has been 7hr 42min working on this. The progress seems so small. I have connect the backend to the frontend using useContext hook. I have also been working on the main page now. I have added some small animation when switching from habits to progress in the sidebar. I haven’t figured out the UI just yet and didn’t wanted to upload this devlog but this has almost 8hr of my work so I thought it’s importand to add a devlog.

Attachment
0
Sam

Completed the backend for the login and signup page and connected backend to mongodb. Also have added protectRoute for the future. Writing the authentication code wasn’t that difficult cuz I have some practice with it now. Tommorrow I want to build the home page but have no idea what to build. Hopefully the creative cells in me spark.

Attachment
0
Sam

I have just finished the auth page. I really like this page as I have added some animations when toggling from login page to signup page. I’m up for any suggestions.

Attachment
0