React Applications Manager
Category:React
Tags: Axios Emotion Feature-based Architecture Firebase GitHub Actions Hooks Lazy Loading Material Design Material UI React React Hook Form React Router React Testing Library TanStack Query TypeScript Unit Test Vite Vitest Zod Zustand
The completed test task was to create a React Applications Manager, a frontend application that displays a collection of projects built with React. The application provides an intuitive interface where users can browse through a list of projects, each represented as a card with an image, a short description, and buttons to either visit the live application or view more details about it. You can see the backend here.
The frontend was built using React 19 and TypeScript, a popular stack for building modern web applications. The project leverages React Router v7 with lazy-loaded feature routes for seamless navigation between different sections. The UI components were designed using MUI (Material UI) v7, ensuring a modern, responsive, and user-friendly design.
For data fetching, the application utilizes Axios with a JWT interceptor and TanStack Query hooks (useApps, useAppSearch) to retrieve project details from a Django REST API hosted on AWS (/api/v1/react-apps/). The frontend itself is deployed on Firebase Hosting at react.karnaukh-webdev.com, with continuous deployment via GitHub Actions. The development environment is powered by Vite, providing optimized production builds and a smooth developer experience.
Overall, the completed React Applications Manager provides a clean and efficient way to showcase React projects in an organized and visually appealing manner. Built with React, React Router, MUI, Axios, TanStack Query, Django (backend), AWS, Firebase (hosting), Vitest, and GitHub Actions, the application ensures smooth navigation, responsiveness, and ease of use.