The pieces have been placed. I was so sloppy 😭

I’ve added pieces to the chessboard. I’ve finally started facing my fear and started working on the puzzles section. It seems that creating the chessboard for puzzles will be harder than I have anticipated. Also please don’t mind the black pieces blending in with the background.

I didn’t find chess piece set I liked so I downloaded the lichess chess piece set from pinterest. I was trying to crop them in figma and I coundn’t crop them properly. Also it was a tedious job. After downloading two crop pieces from figma I again went to the web to find out if someone already made them. This website came in clutch (greenchess.net). They had the whole chess pieces set of lichess available for download.

Then, I started to code with no plan in mind . I don’t know why do I do this to myself. Obviously it was a bad decision. So I decided to use pen and paper to mainly solve one thing and that was how to place the pieces on the board. The writing helped me alot to think better.

I was so sloppy while coding. I was mostly outside while coding and I was really distracted. One sec I was coding and another sec I was thinking about something else. I was making so many silly mistakes making the process more frustrating that it already was.

I learned about fen while doing this (Forsyth-Edwards Notation). Through this any chess position can be stored and recreated in one line. It looks like this

rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1

I only needed to loop over the first part divided by slashes for positioning the pieces. Other things will be used later. I feel the code is really poorly written but it works so idk.

I also found out about regex while I was trying to write a if condition for seperating strings and string with numbers.

Okay this much for today. Bie….

Moving onto something big (I’m scared)

Updates:

• Change ui of popup menus in options.jsx
• Added sounds for correct and incorrect attempt in chessboard
• Added countdown and start sound in chessboard.jsx
• Added puzzles page
• Renamed sidebar of vision page and it’s component with prefix of vision.

Most of the updates in this devlog are small changes. But now I am going on to work on the puzzles page. I don’t know how I will figure this out. I hope it goes mostly smoothly..

I had designed the popup menus in the last devlog. I think the newer design is much better than the last one. The popup menus don’t look the same in the figma and the website cuz I tweak some things while coding. The figma design was a rough design

Adding the sounds in the vision page has made praticing much more fun. The built in mac recorder doesn’t record sound unfortunately or I just don’t how to.. So, I’ll add a ss of vision page with menu open and a ss of puzzles page.

I added chessboard and sidebar to vision page. There were two sidebars now so I decided to rename vision page sidebar to VisionSidebar and puzzles pages sidebar to PuzzlesSidebar.

Okay that was all for this time. Give me strength to start making the puzzle by liking and commentin on the devlog. Byee ♥️. 

Also if you’re reading this support @PAPER_01. AniShuffle has been taken down but she’s been unbanned now 💖.

You’ve my coordinates now

Updates:

• Added coordinates to chessboard
• Changed previous to current
• Fixed user input on chessboard being checked before countdown finished
• The show coordinates now works
• Fixed some event bubbling issues in colorMenu and timeMenu
• Designing the pop up menus

Now it’s easier to locate squares with the help of coordinates . Now you will also notice the board has fliped while changing colors.
~
A small change, in the sidebar the previous word has been replace with current. I think the current word makes more sense there.
~
I also fixed user being able to click on the squared before the countdown finished. This was a silly mistake from me.
~
The coordinates has made it easier to locate squares. But if you want some challenge then you can toggle show coordinates off now.
~

That’s all for this devlog. If you wan’t my actual coordinates dm me 😄.

We’ve reach 100 hours 🎉

Changes:

• Fixed timer not displaying in sidebar
• Removed the square display after time is over
• Fixed timer setInterval running multiple times and made countdown timer code cleaner
• Fix TimeMenu not closing
• Removed unused imports
• Designed the sidebar to add new data
• Added the new design
• Added animation to make the square notation that appears on the chessboard disappear

First of all, we have reached 100 hours let’s goooooo.  I would like to thank everybody who have followed my project read, liked  or commented on my devlogs . My project has recently started getting some traction. Special thanks to @PAPER_01 💖.

I have done a lot of things this devlog. I will try to cover these in as short as possible.

It seems that the setInterval in progress.jsx was running twice. I found out this while I was making the countdown timer code cleaner. So to fix that I reset the hasCountdownCompleted as soon as the timer in progress.jsx runs out. Now, countdown and progress timer work as intended with cleaner code.

The random color option in color menu now works. It was a little tricky making that work. Let’s just say it wasn’t working as expected but the fix wasn’t that hard.

I liked what chess.com were doing. They were displaying the square notation and then the square notation would just disappear. The square rotation will also live in the sidebar so that if user forgets what the square was just displayed, they can easily look at the sidebar. I really like this idea and decided to implement on my project as well.

But before I added this to the website, I first designed it on Figma. I also thought of displaying the score and best score on sidebar. Designing it was fun and tricky. I didn’t really like how the previous score and best score were looking and after some trial and error it looked okay.

All of these things were fine and enjoyable to do but making the best score work was so frustratingggggg. It’s the reason that I couldn’t devlog yesterday.

The issue was score was showing to be zero inside updateTimer function even though the score was greater than zero everywhere else. I thought fixing it wouldn’t be really hard. I tried console log score everywhere to see when the value was being zero but there was no sign of the score turn into zero. Later I found out that due to the updateTimer function being inside a setInterval the value is kind of locked and used useRef hook to solve the issue.

Okay, that’s all for this devlog. Now that I have reached 100 hours let’s aim for 150 hours as soon as possible. I have taken very long to write this devlog so I like would be heavily appreciated 😄.

Mostly cleaning up the code and breaking things

Changes:

• Made timer code better and cleaner
• Added functionality to timeMenu options
• Added countdown before starting the timer and displaying the squares
  -Added VisionContext.jsx to make code cleander and broke down vision page into smaller components

As I said in the previous dialogue, the timer code was messy. So I decided to clean the code now it looks much better.

Also now the time button options work now the timer will have 15, 30 or 45 seconds according to what you choose.

So before, after cleaning on start the timer would start right away and the square would also show up. But this might make the user frustrated as they have to click start and right away move their mouse to the chessboard. I saw that chess.com has a countdown timer so I also made one. The code for this countdown timer is also messy so I will probably make it more cleaner next time.

This is the main thing I have doing this whole devlog which I cannot show you because it’s just making the code cleaner. The vision pays had a chessboard component and then sidebar element to it. The sidebar element had all the code which was making the vision page could a lot messy. So I have broken down components into components and those components in the further components. I think this is making the code much more easy to read and find and debug each component more easily.

But in the process of cleaning my messy code, things have broken down. The timer isn’t working, I will fix that later. I don’t have much to show here today so the see the countdown timer working and the broken timer 😝.

I will fix everything in the next devlog. So stay tuned. Bieee…

Ayy almost 5 hrs today !!

Changes:

• Fixed attempt square and attempts not wrapping as expected
• Fixed color being stuck in chessboard when same square is clicked rapidly
• Added color menu popup when click color button in sidebar
• Added time menu popup when user clicks time button in sidebar
• Added Progress component in sidebar with working score
• Made timer in progress.jsx functional

Fixing the user attempts in the was pretty easy. I just added a attempts container to wrap the attempts element and then the CSS work as expected.

Fixing the red or green colour being stuck in chessboard when clicked rapidly was a headache to fix. I was trying my best and at last I came up to the decision that I needed a timeline for the animation before the animation was played the progress of the animation should be zero. I tried that and obviously that didn’t work but it seems that I was close to the answer. I used Claude to figure out the answer and Claude used killTweenOf gsap function to remove the animation before the animation was even played. It also added a onInterrupt property to the animation which basically reverted the stuck colour after killing the animation. I didn’t want to use Claude, but I just couldn’t figure it out and I think it was better to use Claude as I have never used those functions and properties of gsap. Also Claude made that portion of my much cleaner. Seeing this now, I will be more focused on the cleanliness of the code because claude showed me that my code was repetitive and how it could be made smaller and easy readable.

I decided to make the colour menu pop-up and time menu pop-up straight by coding instead of designing it first as I should have. As you can see, the result is very terrible. I am sure definitely fixing it in the next devlog. I was force thinking of making a pop-up menu component and using them in both buttons but I found that it was a hassle and not worth it. Only the white and black button in colour pop-up menu work. They just rotate the board and that’s all I still need to add functionality to them.

After learning the lesson that I should definitely design before coding. I started designing the progress component. Although there isn’t much to design there I definitely would have made it as bad as the pop-up menus. While coding this, I also made the score display the total number of correct at attempts which was pretty easy. I just had to add one digit whenever the chose the correct square.

Then, I started working on the timer. The timer would have been really easy if I just used setTimeout every second but I like to torture myself so instead of just doing that, I challenged myself using date constructor. I have done this before but it has been sometime and I remember how it worked. The countdown started from 28 which was frustrating. Now, I have just completed that but the code is really messy. I will definitely fix that tomorrow or today as I might post this devlog tomorrow.

I think that shorter devlogs do better in terms of views. I’ll try that next time. See you in the next devlog 👋.

Things are going great

Changes:

• Added chessboard component with ranks and colored squares
• Added function for generating random squares and displayed them
• Added feature to display green and req squares to indicate whether the user clicked correctly or incorrectly in the chessboard
• Displayed attempt made by user in the sidebar with respective colors for correct and incorrect ones

I thought doing all of these took me at least four hours but I was wrong. It seems that it’s only been about like three hours.

This time I have worked on the chessboard itself on the vision page. Before it was just a plain whiteboard but now there are individual squares which was pretty easy to implement. I however needed some time to figure out how to add colours to the squares. But it also wasn’t that difficult.

Then I created a function for generating random squares with the help of math.random(). I created an absolute element to display the random squares at the centre of the chessboard.

To indicate the user that the square they have clicked is correct or incorrect I played the small animation that changed the colour of the user clicked square into red or green depending upon whether the user input was correct or incorrect.

I was stuck here because I didn’t know how to reverse the animation. Of course I could just change the colour to green and then the colour of the square but that didn’t look quite right as I am probably going to change the chessboard colour later. So I wanted the animation to be flexible I was trying to play and reverse a animation timeline but it was so much easier than that later. I just remember there was the repeat and yo-yo property that will easily accomplish this effect I’m looking for.

I have found a new bug with this if I spam click a square the square permanently turns into either red or green so definitely I will fix that in the next devlog.

Also now the squares that the user clicks will be displayed on the side bar. The colour of this square notation will be red or green depending upon the user selected the square correctly or incorrectly. I have found out that there’s a flex related css bug in attempts element. I will look into that tomorrow.

Okay bie.. Hope you have a great day 💖

Started working on the vision page

Changes

• Designed the vison page
• Created the vison page and worked on the sidebar ui

I have changed the name from visualisation to a vision. I actually don’t know which one is better. I just changed because chess.com and chesskid.com had vision for practicing the squares on the board.

Designing of the vision section was quite fun although I had some issues with auto layout that wasn’t big of a deal. I was thinking what options should I have and thought it would be best to add show coordinates, change the color and select the time. I think the UI turned out pretty great. I will probably change the colour of the chessboard but black and white also looks fine.

Coding design wasn’t too difficult. It was just copying the design that I made, but the Figma design looks different. I should check out why the size of the buttons are the same but in Figma they look a lot bigger. It might be because the width of the sidebar is not the same.

In conclusion, this was a peaceful devlog. It feels really nice not having to fight with your code and your designs. Hope that the future develops are the same 🤞. Until then peace✌️.

We have followers

Changes

• Designed hollow medals
• Switched from localStorage to db for storing updating and retrieving completed courses data
• Added feature to show medals achieved by user

Designing the hollow medals (I don’t know what to call that so I’ll just say hollow medal) was really fun. I just started designing the medal for fun in Figma. The result turned out really great even better than what I had expected. I was using circles for the medal itself and was trying to use the rectangles for the below design. Later I figured that it would be wiser to use the pencil instead of creating a rectangle and mapping out the bottom portion of the medal which turned out to be a great idea.

In this project, I have started using Figma for creation of some assets and I am loving it so far my intention is to keep on using Figma until and unless I really have to use AI.

Switching from localStorage to database for completed courses data was easy in my head but it took me longer than expected mainly because of three reasons.

Firstly, I was thinking of creating a separate backend endpoint for course data. After creating the controller and route for course data I thought that it isn’t really necessary to create another endpoint for this as we can store it in the users data itself.

Secondly, after deleting the routes and controller, I created API function for fetching and updating the completed course data period I had forgotten that I don’t actually need to have a separate getCompleted function because while fetching the user itself, the data comes with it. I have forgotten to delete the getCompleted.js file which I will do later.

Thirdly, I have started to use Postman for testing out api . I am loving to learn things such as Postman and Figma. But this issue I was facing was the postman was working correctly but from my codebase the request body was showing undefined. It was a fetch thing I use axios before and I am figuring out right now why people used axios. It seems that I needed to specify in the header that this request had the content of json. So figuring that out also took some time.

Also, I have added the feature to show medals achieved by user. The code isn’t quite clean for this feature.

Thanks to the people that followed this project. I genuinely appreciate that 💖.

New followers :

@PAPER_01
@sak

When will my devlog get more than 7 views 😭

Changes:

• Added loading component
• Added scrollsmoother in home page
• Fixed course page padding and added toast while redirecting unauthenticated user
• Added back button to signup and login page
• Designed the logo for website
• Added the logo to the website

Now whenever the frontend fetches user data from the backend there will be a loading component that will come up. I made the loading spinner myself in figma why not 😃.

Scrolling the home page using a mouse is so much better now now due to scrollsmoother plugin of gsap. I was facing a issue with this though. I was seeing an error while navigating to other pages. After a while I found out a guy with same issue in gsap forum and his solution worked. God bless that guy 🙌.

Some small changes were fixing the padding in course page , adding a toast while redirecting unauthenticated user from couse page and adding back button in singup and login page. I think they don’t need much explanation.

I tried to design the logo of my website in figma. I tried different things and landed with a design that felt decent (The logo with king in the center). I look nice up close but it didn’t feel the same when shrunk down as a logo. So I started designing another one. I landed on the logo with cyan and dark purple background and !! symbol up front. I really don’t know how I feel about this logo. I looks decent sometimes and other times questionable. Please leave your opinion in the comments 🙏.

While adding the icon as a favicon, for some reason the favicon wasn’t display which was confusing. Later I found out that this was a brave issue cuz it’s showing up in zen browser.

Okay this much for now. Please like so that more people see this devlog 😭.

Wth it’s been 5hrs??

• Added toast for login signup and login as guest errors
• Made the signup data persist even after the value of hasContinued changes
• Designed the dropdown menu
• Added dropdown menu
• Added logout functionality

First of all, I’m genuinly confused how this took me 5hrs..

Added toast so that now when there’s any error during the signup or login. For example during signup maybe a user might write a username less than two characters, then the toast pops up telling the user it should be greater than 2 characters.

I was stuck during this cuz the trycatch block wasn’t catching the error which was confusing. I used axios previously and it threw an error if the backend response wasn’t ok. But this time I avoided using axios for reasons that you guys probably know 💀. It seems that fetch didn’t throw any error so I had to manually throw errors in the api functions.

The making of signup data persist on hasContinued value change was early. I just set the value attribute of input to be it’s respective useState data.

As you can see in the image that I designed the dropdown. I first designed the dark one which I really loved but it didn’t match the navbar so I created a light one. After seeing the dark one I really didn’t like the light one. So I tried fixing the design. I asked someone in the slack and they said the previous light dropdown design looked fine. Ig looking at the dropdown for long made it look fine to me as well 😂.

Now I added the dropdown to the website. I had issue with the padding of the logout button during designing phase but I just winged it during coding phase and it worked 🎉. The dropdown now looks fine imo. I however did have a issue while making the dropdown closing work when user clicked outside of the dropdown. I thought of using an overlay in the background but I knew that there was a way of doing this by checking the click event. It seems I had forgetten to do this. After some trial and errors I remember how it was done..

I also added logout functionality which was fairly easy to add cuz I’m storing the jwt in the localStorage. I just removed the token for localStorage, set the user to null, set isDropdownOpen to false and navigated the user to the home page.

Ig, i’ll try do things faster next time ⚡️. Don’t want to spend 5hrs on things like these. Okay biee…

Omg it’s finally fixed

I finally fixed the bug that I addressed in my last devlog. This was so frustrating. I never expected that this would take me 2hrs and I would write a whole devlog on it 💔.

The bug was that when I was logging in I was being redirected to /signup after signup, login or login as guest. I had made so that after signing up or logging in the user would be redirected to course page. I had also made it so that if the user value is null then the user would be redirected to the sign of page. So now you can see that where this is going. I just couldn’t simply figure out why the user value was null. After doing so much thinking and reading the code and trying to fix the bug, I have finally succeeded.Another issue that I was facing during the working was I was constantly forgetting what I was doing and to see everything visually I used excalidraw as you can see in the picture.

So there were three things that was leading to this bug. Firstly, I wasn’t using the await keyword while calling the api functions. Secondly, I didn’t have a loading state while fetching the user’s data. Lastly, the function getUser function responsible for fetching the user data wasn’t even being called when redirected to course page. The function  was only being called when the user first loaded the website.

Right now, my head is aching now I think I should take some rest. I didn’t remember to add loading state which was so silly of me. I only realized that after visiting my old project. Seeing that I felt dumb because ofc you would need a loading state while fetching the user data from backend. I feel a little relieved now 😮‍💨. I cannot even remember properly all the things that I tried to solve this. It was just a mess 😩.

After solving the bug, now looking back, it wasn’t that difficult to solve. It was just a me problem. I could write more on this but I’m too tired for this now. Okay biee..👋

Life is frustrating 😩

##Changes:

• Added navigation to /course after successful login
• Designed navbar when user is logged in
• Added the user button in navbar when user is logged in
• Added redirection to signup if user goes to /course without authentication
• Fixed jwt malformed error in protectRoute.js

The navigation to /course after successful was implemented before but I somehow missed to implement that in login page.

Designing the navbar for authenticated user was very challenging than I expected. As you can see in the image there are multiple attempts at creating the navbar. Everything I tried was just looking bad. The final design is also questionable. But for now it is what it is.

Now unauthenticated user aren’t allowed to visit course page. They will be redirected to signup page if they try. This was supposed to be simple but somehow I made this also hard for myself. I have done this before so this should have been easy for me but nope. The redirecting was working fine but I were to be authenticated and be on course page and then reload, then also I would be redirected to the signup page. After I made up my own solution for this which I don’t think is the best way to do it.

Due to my incapability of designing simple things and solving minor bugs I was questioning my ability to solve problems and design. Which at that moment felt sad 😔.

Also there was jwt malformed error popping up in the backend which was also frustrating to solve. Not because it was hard but because it was easy and I wasn’t able to solve it. I won’t tell you what happened here as the devlog is getting long.

No video this time cuz the I can’t show the navigation changes working as they aren’t working properly. The bug is preventing user from redirecting to /course after login or signup. Instead user is redirected to signup. I know that this because of the two redirection changes made in this devlog. So, I’ll go and fix it asap.

Hope your coding experience isn’t going as frustrating as mine. Thank you for reading my frustrations. Bye…👋

I’m sorry 😭

##Changes:

• Use localStorage to store jwt instead of cookies
• Fix signup page unequal width of img and form container
• Changed login.css similar to signup.css for consistent code
• Added login as guest functionality
• Added navigation to /course after signup or login success
• Added UserContext.jsx to handle user data
• Added protectRoute middleware to verify jwt
• Added “/api/user/“ endpoint to get user data from backend

Too many changes, let’s break them down.

I’m sorry that I switched to localStorage to store jwt instead of cookies 😭. The cookie wasn’t working as expected. I was able to store the jwt in the cookie and receive it in the frontend but when I reloaded the cookie would just disappear. I know that there’s a fix for this as I have done this before as well. But, I know that I’ll face the same issue during deployment even if I fix the issue now. I’ll probably deploy this in vercel and last time (in flavortown) I had to change the whole code format due to the cookie issue. So this time I’ll just rely on localStorage for now. If I deploy the website myself then maybe I’ll consider using the cookie. But for now just forgive me 🙏.

I fixed the unequal width of img container and form container with again in signup page. This happened because I added padding to the form-container instead of the form. Using flex for this was a headache so I used grid and it worked.

Although I didn’t necessarily needed to change the login page css. I did it to maintain a consistent codebase.

This is a huge one. I added login as guest functionality. I know that people will be skeptical of entering their email even though they can use any made up email such as abc@gmail.com. I purely added this feature so that people don’t rate me bad just because they assumed that they need their own email to signup. And logging in as guest is easier as well so why not.

Now, after the signup, login or login as guest is successful then we’ll be redirected to the course page. Later I’ll make it so that users who aren’t logged in won’t be able to access any other path except for the “/“.

Also now there’s userContext.jsx for storing and distributing user data. For now there’s getUser function for getting user’s data. I have made the backend work to verify the user’s token and then only provide the user with their data.

Alright no more yapping, the devlog has gotten very long. If anyone has read this devlog, God bless them.
~
Peace ✌️.

More progress on signup and login

Changes:

• Designed the username form
• Created the username form in signup
• Changed useRef to useState to store signup data
• Adjusted the backend to receive and store username
• Add login functionality
• Fixed required attribute not working in both signup and login form

Designing the username form wasn’t that hard as it’s just the signup page but will less things. I looked at how chess.com was doing things during signup and thought it’s better to split the email and password into one form and username form into another. There’s also a back button to go to the email and password form.

Coding the username form was a little frustrating as I had some issue positioning the back button. Now it’s working but now I am facing the old issue of img-container and form container not being the same width. I’ll fix that next. Also the way username form is display is by just toggling a state into true or false in the singup page.

After adding the username form there was an error telling that email and password was null. This was because while entering the username I wouldn’t be able to access the email and password input using the useRef hook. The fix was simple, I just changed the useRef into useState and store the data on input change.

Now that was extra data (username) that needed to be stored. I sent the username along with email and password to the backend and changed the userSchema to accept username.

I worked on the signup functionality last time so this time I worked on the login functionality. In short, now during login the backend verifies the email and password and gives the user a jsonwebtoken as a cookie or an error.

I wanted the input to display “field is required” when user tries to login or signup without filling in the form. I just couldn’t get this working and it was so frustrating because the issue was so simple. Later I found out that I was using e.preventDefault on the button instead of the form causing the input to not show “field is required”

Okay enough yapping. Gotta go and work on the project. Hope your project is going smoothly. Bie…👋

50 hours!! Let’s go 🎉

Changes

• Designed signup page and login page
• Created signup page and login page
• Divided the codebase into frontend and backend
• Setup backend
• Setup signup endpoint to receive formData

Designing the signup and long page was really fun. I took some inspirations from pinterest. I’m proud of the design I made 😄.

Turning the design into code was also fun ig. I did face a small bug. The image looked bigger than the form but both had flex-grow of one. The fix was simple I just had to change the flex-basis to 0 so I did flex: 1.

Finally I’ve started on the backend. It’s been some time since I haven’t done backend stuff. Coming back to backend felt nice.

Although it was frustrating when the data sent to backend was just saying it was undefined. But after some time I just figured out that I forgot add express.json() middleware in my server.js.

I’m well now and feel that now I’ve no motive of slowing now. Hope you’re also doing well 🤞.

Many small improvements

Changes

• Made the opened cards remain open after finishing a lesson or going back from watch course
• Saved completed course data in localStorage
• Added confetti animation after clicking on finish lesson
• Fixed value of total in course.jsx by making it dynamic
• Fixed navbar animating when reloading on non home paths

This time I have done many small changes but I think that they make a great impact on the website.
~
Firstly I made the card remain open while visiting other pages. I mainly did this as a part of user experience. I thought that it’s inconvenient for a user to see the card they opened being closed after they come back from the course watching page.
~
Also, now the data of completed course persists. It is stored in localStorage. I’ll definitely stored the data in database in the future. Also I was facing an annoying bug doing this because I forgot that I needed to stringify the data before storing in localStorage😭.
~
There’s now confetti animation after clicking finish lesson. I think it looks nice. I used a npm package for the animation.
~
Before the total course was a dummy value of 10. Instead of counting the courses manually I just did a sum of length of all courses data from constant.js. Now, when I change the professional course value I won’t have to think about changing the total value.
~
The navbar animation was meant to run only when user move from home page to other page and vise versa. But, when I was on the course page and if I reloaded the animation would still happen. Fixing this was really painful as the solution was really easy but I just couldn’t figure it out. At last I took the help of Claude to figure out the solution 😩.
~
I took two days off because I was sick again😭. Why is my immune system so weakkk😭..

Now the completed course has a green tick mark

Basically now if you click on finish lesson you’ll be redirected back to the course page and the lesson you choose as completed will have a green tick mark inside the course card.
~
Also, if a lesson is completed the navbar won’t show the finish lesson button.
~
Right now, the data doesn’t persist across reloads. I will store the data in localStorage next and when I implement the backend, then only I’ll store the data in database.
~
The challenging part was seeing the whole picture. How will the feature work, where will the data live and how to know if a lesson is completed, things like that.
~
Also, during development I thought of using useContext hook but I had forgot how to use the hook while following best practices so I just went to my previous project to relearn stuff😅😆.
~
I decided to use pen and paper for problem solving and better visualization which worked really great for me 🎉🎉. I will definitely do this when I encounter problems in the future 😄.
~
Btw, No bullet points this time😅. I haven’t completed much as I’m sick. Hopefully I get well tomorrow🤞.

I’m locked in

Progress:

• Changed the dummy data from beginnerCourse and intermediateCourse in constants.js
• Created WatchCourse page
• Made courseCard open WatchCourse page with respective course video
• Made navbar show go back and finish lesson on button if the user is on WatchCourse page
• Designed a banner for the course page

I changed the data of beginnerCourse and intermediateCourse in constants.js file which instantly made the cards inside both beginner and intermediate so much better. The professionalCourse data hasn’t changed and will be changed later.
~


After that I worked on one of the main feature of the website which is being able to watch the course. Now, if user clicks on a course that they want to watch, then will be redirected to WatchCourse page. I achieved by using the YouTube embed link and dynamic routing.


~
The navbar also changes in WatchCourse page as there will be go back and finish lesson button. The go back button currently works but I still have to work on the finish lesson button.


~
I took a break from coding after doing that and started working on the banner. I don’t really know how the banner should look so I just added a gradient, two chess pieces, some text and some chess analysis moves and called it a day.
~
Now I’ll go export that banner and add it to my website. If you have any recommendations please let me know. Biee..

Mostly designing and coding that design.

Progress:

• Completed the info element
• Designed the course card inside the accordion
• Created the course card component
• Moved accordion, courseCard and progressBar component into components folder within the course page

The course page is slowly but surely coming together. I think the info element looks really nice now that it’s complete. But yeah the list does contain dummy information. I will change them after I have selected the videos as my courses.
~
CourseCard component seems okay imo. The tick mark is supposed to indicate that the user hasn’t completed that course. After the individual course is completed it will go green. I have mixed feelings for the tick mark being there. The idea seems find but I’m really not sure about the design.
~
But anyways it was fun designing in figma. In the website have made the CourseCard with the ability of each card having different text and image but right now they are only a little different in different levels.
~


Idk how time passes so quickly. Got only this much done in 4hrs😕 but I think I am now starting to enjoy the process. I am not focused on the time so heavily as I was before 😇.

~
Okay this time I have decided to keep my devlog shorter. Any opinions will be appreciated ❤️.

Ayy new devlog let’s go!!

Updates:

• Designed the info part (the portion with the progress bar)
• Created working accordion component with animations
• Started working on the info part
• Created working progress bar component with animation



I like the design of the info element. I have tried using hierarchy to make the design look good. Also I randomly had the idea of earned badges after the user completes the whole course of a certain difficulty. Then, I hoped onto coding the accordion. Firstly I wasn’t making accordion as a component. There were just three div in the course page and I realized that if I don’t make it a component the code is going to look messy so I created the accordion component and now the code looks much cleaner.

While making that I stumbled across a funny bug. Clicking on one accordion component was making all component to open. It was because of gsap selecting all the similar classes and animating them. I fixed that by using useRef to select elements.

I have also created a progress bar and now I’m working on completing the info element. The progress bar looks good if it’s even a little bit full but idk how I feel about the progress bar when it’s at 0%. It feels bland and idk what to do.



Okay enough rambling. I feel my devlogs should be shorter ig. Anyways if
you have any suggestions please let me know. Peace ✌️Ayy new devlog
let’s go!!

Updates

• Added RootLayout.jsx for reusing a single a navbar across all pages
• Changed react-router-dom to react-router
• Added expanding animation to the navbar when the path is “/” and shrinking animation on other paths except “/”
• Designed the course part in course page

What I wanted

Before I added the navbar inside home page but after creating the course page I realized that I would want the navbar to be reusable across all pages. Also I wanted the navbar to expand in other pages expect the home page.

Switch to react-router

I was using react-router-dom for managing routes. I tried to look up the docs to make the navbar reusable. I couldn’t find anything and saw that react-router-dom just used react-router so I thought it’s was not necessary for me to use react-router-dom so I just switch to react-router.

Navbar animation issue

Animating navbar to expand and shrink was a mess. It’s look really simple and it is simple but not for my brain. I first thought of making the width to 100% and set align items to center. The width part animated as expected but the align items didn’t. Then I thought of using position absolute and centering the nav but now the navbar wasn’t respecting the nav-container’s padding. It was frustrating so I took help of claude and centered it using y property by doing some maths.

Time flies

I also had issue with the timeline reverse not working but I think I should stop my complains here.
I am rambling here because it took too long to do too little 😭 .

Designing the course page

On the positive side the I have started working on the design of course page. I have only done a small part but it’s looking amazing. The part other part that don’t look right were the design which I made during the start of the project. Rn I am just refining that previous design of mine, that’s why the navbar looks different in figma.

Hope you have a nice day ❤️

Visualization section transformation

• Separated visualization section into text wrapper and body wrapper
• Added a text with reveal animation in text wrapper
• Added visualizedMoves with animation around the img-container
• Deleted the thought component

Finally I get to post a devlog with some good. It’s a better time cuz I’m logging both the figma and the coding time for the first time.

Previous design

I didn’t really like the previous design so I thought for a while and came up with this design. Although it isn’t perfect it’s much better than the last one. The figma design and the website don’t look the same because I just did the design roughly in figma and then winged the chess moves position in vscode. I think removing the background of the chess moves was a great decision.

New design

Firstly I designed the concept in figma before coding. I added a text wrapper within the visualization to break the flow of the website. The previous design which I was going towards started feeling like a generic website (a bad one). Now the there’s text with a reveal animation which looks pretty simple tbh but I think it’s better. I might change that in future though or add elements to make it look fuller. The after the text animation the person visualizing image appears and different moves appear indicating that the person is thinking the moves. I was going to use a thought component for this but I did it in a more simpler manner.

Time

I always underestimate the time required to build things. I feel that I should have completed more in the time that has been recorded but small bugs happen while coding which is really frustrating. In this devlog also I feel I should have completed more. Am I just slow or happens to others as well. I really would like to know (comment).

Hey, this devlog is a messy one.

Changes:

• Created visualization section
• Created thought component
• Designing the visualization section

Connected figma to hackatime

I just figured out that I can add my connect figma to hackatime and record the time under this project. I have always designed this project before writing the code which a lot of time which could have been tracked is lost. That’s not a big worry as this project has long way to go.
I just figured out that I can add my connect figma to hackatime and record the time under this project. I have always designed this project before writing the code which a lot of time which could have been tracked is lost. That’s not a big worry as this project has long way to go.

Why this devlog is messy/incomplete

The main purpose of this devlog is to figure out where I am currently in my project . I haven’t worked on my project like I used to because of my illness. So, instead of working on the project and forgetting what i did I just decided to commit the changes in my vscode write this devlog. I am hoping to work on this project as before as I am feeling better now. So that’s why the images below seem incomplete. Hope you guys are doing well.

Btw the figma ss and the website image don’t match cuz i decided to change the figma design just before writing this devlog. I wasn’t happy with the previous design so i’m just tweking it to see where i land.

Changes:

• Split home.jsx into smaller components
• Installed and applied different font weights
• Made navbar better
• Completed puzzle section on a basic level

This time instead of jumping on doing something new I started with making the code cleaner first. It was easy as nothing broke. Then, I realized the font in the hero section doesn’t look as bold as in my figma design so after looking into the problem for a while I realized I had just the regular font weight of font downloaded leading to fonts looking different. Also made navbar better by decreasing horizontal padding in the button and adding a box shadow. Adding the box shadow made the navbar visible in the courses section. I also completed puzzle section which is looking good but I want to animate the image (Yoinked from chess.com btw 😅). The animation will bring so much life into the section but I really don’t know achieve that. If you can help me or have any suggestion in general please let me know. That’s all for this time folks. Piece ✌️ (It’s a pun btw)

Ayy new devlog!!

Changes:

• Corrected timing of animations in courses section
• Added level indicator of thumbnail
• Added temporary images in each thumbnail.
• Added animation to course title
• Made animation on work reverse as well

I’ve shifted on my macbook for coding which I’ve received from flavortown. Anyways, the courses section looks much better now. I am still not satisfied with the animation of courses info elements. I spend way to long to make that work but in the end I took help of gemini to make it work. Also, timing looks way better than last time. Now, I’m going to split the home page into smaller components to make the code cleaner. Also I’ve to do something of the navbar. Any suggestion will be appreciated.

Changes:

• Added shrinking animation in hero section
• Moved courses text to a constants file
• Added thumbnails in the courses section with animation

The courses section animation doesn’t look the way I want it to be. I’ll be fixing that.. Also things are taking more time than expected which is really frustrating. I thought this will take me about an hour but it’s still not finished. I’ll surely finish courses section today. Hope your project is going smoothly.

Changes:

• Added text reveal animation

Ahhhh it took three hours only to create this text revealing animation. I stumbled across many css and gsap bugs to make this. I first tried to use the ::before pseudo element which worked really well but later replaced it with span cuz i couldn’t figure out how to animate that with gsap. There are many other things that really annoyed me but lets not make this devlog a whole essay. But I love how it turned out in the end.

Changes:

• Fixed the page stacking animation
• Changed the layout of hero section.
• Made navbar position fixed

I was trying to make the navbar sticky which wasn’t working at first and was so annoying, after solving that I found out that it won’t go outside hero section. I was frustrated that I was messing up something so easy. Also it seems that I was doing the stacking animation the wrong way so I fixed that also. So now I have a clean stacking page animation and a navbar that stays at a fixed position.

Created courses-section with page stacking animation. It took me an hour to figure this out 😭. I knew that I have to pin the hero-section but couldn’t figure out how to move the courses-section to overlap the hero-section. I watched different videos and even went to some random guy linked in account to find out the answer. But eventually I just figured it out myself. I still have to check if the way I have accomplished it is the correct way or not.

Just worked on adding the animations to the home page. Also I downloaded the font instead of using google fonts cuz it was taking some time to load every time I reloaded the website. The animation of the hero text was a little tricky as it wasn’t working at first but then I found out the culprit was span. I change the span to inline-block and then the animation worked as expected. I have also made the let’s go nav button same as the cta button for consistency. You won’t be able to see the animations sadly cuz I’m attaching a screenshot here.

First devlog

I have worked on the hero section. I think it looks pretty good. I have some improvements to do on the nav bar. Also, I have to crop out the hero image. The image is taking alot of space rn. Now I’ll devlog after the hero section is complete and then will start on animating the hero section.

Hope you’re project is also going well.