All solutions

In this challenge, my main goal was to learn and work with multiple technologies I've been wanting to learn for a while. I learned/used the following technologies:

• Framework: Next.js
• Styling: Styled Components
• State Management: Redux Toolkit with Thunks (async reducers)
• API Response Validation: Zod
• Component & E2E testing: Cypress
• Layout Animation: Framer Motion

I learned many new things while setting up different parts of the project and working with these technologies (like Redux Toolkit using Immer under the hood for keeping the state immutable while allowing for mutable state update logic) and I have written multiple blog posts about what I thought would be useful to others as well as myself in the future:

• Preventing the Layout Shift Caused by Scrollbars
• Using Styled-Components with Next.js v13 (TypeScript)
• Testing the Redux Store using Cypress in Next.js (TypeScript)

I look forward to learning and working with RTK Query which is based on Thunks in a future project.

P.S. For the data, I set up a Next.js API endpoint and fetched the data from it. I've also modified the CORS headers so you can use it in your project as well if you want to practice with data fetching:

• API Endpoint: https://joblistings-rashidshamloo.vercel.app/api

This is my second solution for this challenge. I have added User authentication using Firebase Auth and data storage using Firestore.

This challenge helped me learn a lot about NoSQL/Document databases in general and Firestore in particular.

For example, I wrote and executed each database query separately at first which caused lag. then I grouped multiple queries using writeBatch() that allows multiple queries to run in only one db request, which reduced the lag. and then I learned about Latency Compensation and Optimistic Rendering using onSnapshot() which keeps a copy of the database state in memory and updates it instantly before data is sent to the database and reverts the change in case of error. this allowed for instant updates and no lag for the end user.

I also learned about anonymous user setup using Firebase Auth and FirebaseUI and upgrading it to a normal user after log-in while keeping the data intact. Also handling auth merge conflict that happens when logging in to an existing account from an anonymous account.

Another challenge was using FirebaseUI with Firebase v9. since FirebaseUI has not been updated to work with Firebase v9, using a compatibility layer is necessary and I encountered some errors related to this. also it took some time to figure out how error handling worked in FirebaseUI.

Edit:

I've refactored the code to use custom hooks for user authentication and database.

Also, I've fixed a bug with auth that prevented login to an existing account. if you had trouble with login before, it should work now.

Note on the bug: when logging in to a new account from an anonymous account, the user becomes null between the transition (anon => null => logged-in). and I was triggering anonymous login when user is null which resulted in an anonymous login even after logging in with email/google...

I will be working on my portfolio site soon and every portfolio needs a Todo app so I decided to give this challenge a go. also, I wanted to try using framer motion's Reorder component for element reordering. for a complete list of features please check the GitHub Readme.

In this solution, I'm using localStorage to store the items but I'm currently working on adding user authentication and storing the items, and doing the CRUD operations using Firebase and Firestore. I will submit another solution when I'm finished with that.

This challenge took longer than I anticipated but allowed me to learn a lot. I ended up writing a backend for it in Node/Express. Please check the readme on GitHub for more detail.

In this challenge, I've implemented a count-up component for the "Communities Formed" and "Messages Sent" numbers. I have also added animation to elements when in view using a component I built from scratch using Framer Motion.

I have implemented some extra features in this challenge to learn more about Material-UI and TypeScript.

I have added animations, scroll snapping, full-page navigation, and a modal window that opens when you click any of the buttons.

I have also written about my process in two blog posts. you can check them out here:

Clipboard Landing Page: The Process

Material UI Customization (TypeScript)

This is my 30th challenge! 🎉

First time using Material-UI with React. It took some time to learn how and customize the components to look exactly like the design, but I learned a lot about the customization process.

Also used SASS/SCSS again this time after using Tailwind CSS in the last few challenges. it's a good practice to switch technologies once in a while to not forget about how to use them.

First time using TypeScript with React. it takes more time to implement components since I have to use the exact types and interfaces. hopefully, it will make life easier in more complicated projects.

I also learned and used framer motion for the transition effects. I've added a select element at the top of the page where you can change the transition effect.

I went the unorthodox way of having the buttons inside the sliding elements. which may not be the best for accessibility and made it harder to implement but instead I learned a lot trying to pull it off. the upside is that each slide/element can have different-looking buttons in any location and just has to call a parent function to switch to the next/previous slide. I have some ideas for some personal projects in the future.

You can navigate with left/right arrow keys, swiping left/right, and of course the buttons.

I've implemented everything using components in Vue.js and the data is stored in a JSON file and loaded dynamically. it was a good practice/learning project since a dark/light mode toggle is useful in every website.

I did this challenge using TypeScript and Vue.js Composition API to get more comfortable with these technologies. I will probably switch back to React.js for future projects. also, I will try to use Material-UI or Bootstrap in the future because I think I have a good grasp on Tailwind CSS now.

My first time working with Vue.js. I also learned more about Tailwind CSS.

The data is loaded dynamically from a JSON file and I've used animations to make the app feel more elegant and did my best to make it accessible.

Please let me know if I'm doing anything wrong or not following best practices.

Implemented using components in react and the data is loaded dynamically from a JSON file.

Learned a lot about using various grid properties in Tailwind CSS. if you want to use grid-template-areas in Tailwind CSS, you can use this plugin: Grid Areas for Tailwind CSS

Click the "Dice" button for random colors!

At first, I used a hoverable drop-down menu approach but after reading about how it's not good for accessibility, I changed it to a clickable one. I've tried to make the menu more accessible by using ARIA attributes like aria-expanded, aria-controls, and aria-labelledby. please let me know if there's anything wrong with the accessibility.

Instead of hardcoded items for the menu, I've added the menu data to a JSON file and implemented a component in react that shows the menu dynamically based on the data from that file which allows for changing the items, icons, and links easily in the future.

I've also added CSS animations to the menu in both desktop and mobile view and looked up animation libraries like framer motion to possibly use and experiment with in later challenges. 😊

I noticed in Tailwind CSS, some CSS properties like "border-1" are in "px" units while others like "w-1" are in "rem" units. is this a better practice? because in my previous CSS/SASS I used to do all units in "rem/em", and I'm wondering if i should do the same.

The chart is dynamically generated using the data provided in the "data.json" file.

Learning how to deploy Vite/React to GitHub Pages took a bit of time 😅

Took a little longer than I anticipated 😅

But updating the credit card information in real-time and validating for multiple conditions was a good challenge.

I used the "data.json" file to add the results and calculate the total score.

Any feedback is appreciated :)

This is my first time using the BEM naming convention. Hopefully I did it correctly.