PLGD

Introduction #

PLGD is a playground where I showcase my small projects.
I’m learning React with Typescript and wanted to create a simple front-end project based on my learning. I also focused on flexible single-page application web development with data fetching and state management by integrating external APIs. For the web design, I tried to express what I wanted by referring to v0.dev, Pinterest, etc.

Technology Stacks #

• React for building component-based User Interface easily
• Vite for fast and efficient development
• TypeScript for static type checking
• Redux-Toolkit for simplifying state management
• TailwindCSS for utility-first CSS framework
• DaisyUI for TailwindCSS components library

Project features #

Udemy Discount Checker #

A web app that checks Udemy course discounts by region. It currently supports four countries.

Custom Udemy API #

A custom API server that provides Udemy course discount information. It is built with Node.js, Nestjs with Express, and MongoDB. It stores and manages discount statuses based on data obtained from the official API on an hourly cycle.

Development Features #

• Utilizing Redux Toolkit to manage state values immutably
• Making asynchronous calls to external APIs with redux thunk
• Creating flexible modals with UI state management
• Separating routes using react-router-dom and handling error pages
• Implementing data caching based on API update cycles

Design and User Experience #

• Designing responsive UI behaviour for mobile devices
• Implementing different navigation designs for various mobile platforms
• Flat designing with emoji and solid colors

Challenges and Solutions #

A job to check for discounts is scheduled to run every hour. This means that the status of the discount on the API server will not change for an hour.

Therefore, there is no need to call the API server every time a user checks for a discount. To address this, I have implemented a simple caching system that stores the discount status for an hour.

As a result, the number of API calls to the server has been reduced, leading to an improvement in the user experience.

Conclusion #

While working on this project, I learned a lot about effectively handling asynchronous data fetching and state management in React with Redux Toolkit. I also learned how to create flexible modals with UI state management, separate routes using react-router-dom, and handle error pages.

I will continue to plan and develop various projects here to continuously improve my web development skills and knowledge, please look forward to it 🤓.

What’s next? #

• Add more projects
• Fix minor bugs