Portfolio Details

Project information

๐Ÿถ Dog Book โ€“ A Full-Stack React App for Managing Dog Profiles

Dog Book is a full-stack web application built with React and Node.js that allows users to view, manage, and explore detailed dog profiles. Developed as part of a school project, it showcases key concepts in front-end development, RESTful API integration, responsive design, and automated testing.

โœจ Key Features

  • ๐Ÿ“‹ Browse Dog Profiles โ€“ View a list of all dogs with essential information
  • ๐Ÿ‘ค Profile Pages โ€“ Explore individual dog profiles with detailed attributes
  • โœ๏ธ Edit Profiles โ€“ Update existing dog information including name, age, and bio
  • ๐Ÿง‘โ€๐Ÿคโ€๐Ÿง‘ Friend System โ€“ Link dogs as friends with bidirectional relationships
  • ๐Ÿ–ผ๏ธ Image Uploads โ€“ Upload profile images using Multer
  • ๐Ÿ”— Relational Data Handling โ€“ Update friend connections when profiles are edited or deleted
  • ๐Ÿ“ฆ API Integration โ€“ Communicates with a custom Express/MongoDB backend
  • ๐ŸŽจ Responsive UI โ€“ Built with Chakra UI for a consistent and mobile-friendly experience
  • ๐Ÿงช Unit Testing โ€“ Component-level testing with Jest and React Testing Library

๐Ÿ› ๏ธ Tech Stack

The project is built with a modern and modular tech stack. The frontend leverages React with Vite for rapid development, React Router for navigation, and Chakra UI for a responsive and accessible interface. On the backend, it uses Express.js along with MongoDB and Mongoose for data management, and Multer for handling image uploads. HTTP communication between the client and server is managed via Axios. For testing, the stack includes Jest, React Testing Library, and Vitest to ensure component and API reliability. The application is deployed using Vercel for the frontend and Render for the backend services.

In the future, I plan to expand the project, add more features, and integrate new technologies based on feedback to further improve the user experience.