My Blog

First of all , thank you very much for reading this small documentation for my side project 'Astro'. this is just a small practice for using NextJs and Handling API calls , to keep it short i m gonna try to explain my process of thinking and steps i took to creat this.

In this project, I built a dynamic and responsive web application using Next.js and Node.js. The application fetches real-time data from the Steam API to display various statuses and user queries. Leveraging the powerful capabilities of Next.js for server-side rendering and Node.js for handling backend operations, I ensured a seamless and efficient data flow. Tailwind CSS was utilized to style the website, enabling a clean and modern design with minimal effort. Throughout the development process, I focused on integrating APIs, handling user inputs, and creating a user-friendly interface that adapts to different screen sizes.

As a passionate gamer who uses Steam daily, I decided to build a project centered around this platform, leveraging the Steam API. The primary API feature I developed calculates the cost of leveling up your Steam account. By simply entering your username and the desired level, the application fetches relevant data from Steam and performs the necessary calculations to provide an accurate cost estimate. Additionally, I implemented a status API that monitors and displays the current status of various Steam services.

After deciding to integrate the Steam API into my project for functionalities like calculating account leveling costs and checking service statuses, I initially faced a CORS error while attempting to fetch data solely from the frontend. Upon researching the issue, I discovered that backend frameworks are often required to circumvent CORS restrictions, especially with certain APIs. Given my familiarity with JavaScript and ongoing learning in web development, I opted to implement Node.js for the backend.

To ensure the security of my API keys when preparing to make this project public on GitHub, I adhered to best practices by storing sensitive information such as API keys in a .env file. This approach prevents accidental exposure of confidential data. With this initial step in place, I proceeded to structure my backend using Node.js.

API Routes and Functionality

- Health Endpoint (/health): This endpoint verifies the operational status of my API, providing a simple check for functionality.

- Status Endpoint (/status): Utilizing the Steam API, this endpoint fetches and displays current Steam service statuses. To optimize performance and minimize API calls, I implemented a caching mechanism using cron and fs modules. This ensures data is refreshed at intervals (every five minutes), balancing real-time updates with resource efficiency.

- User Information Endpoint (/id): Designed to retrieve specific user information from Steam, this endpoint facilitates queries based on user input. Dependencies like body-parser streamline data transfer from frontend to backend, enhancing interactive capabilities.

The front end

Next.js: Chosen for its SSR capabilities, Next.js allowed for faster initial page loads and improved SEO by rendering pages on the server-side. Its file-based routing system simplified navigation and project structure.

TypeScript: Integrated to leverage static typing and better code organization. TypeScript ensured early error detection and improved code maintainability throughout the development lifecycle.

Tailwind CSS: Adopted for its utility-first approach, Tailwind CSS facilitated rapid UI prototyping and customization without the need for custom CSS. It streamlined frontend development while providing responsive design out of the box.

Shadcn: To optimize user interaction, pre-styled components from Shadcn UI were implemented. This library offered ready-to-use UI elements and dark mode support, enhancing user experience based on system preferences.

In concluding this project,

Throughout the development process, I relied on diverse resources such as Stack Overflow for troubleshooting and best practices, as well as leveraging ChatGPT for insights on architectural decisions and optimizing frontend performance. These tools and communities were instrumental in overcoming challenges and expanding my technical proficiency.

Looking ahead, I aim to build upon these learnings, continually refining my skills in frontend development and backend integration. By harnessing the power of modern web technologies and collaborative resources, I'm committed to delivering robust, user-centric applications in future projects.

Thank you for reading till the end , i hope you enjoyed my little story , be sure to follow my 'LEARN TO CODE' channel , it will have many projects like this in the future and it will always be free @HibaFreelance , you can find the links on the footer , Stay Safe and keep Coding.