Portfolio Details
Project information
- Category: Full stack Development
- Client: Class assignment
- Project date: April, 2025
- Project URL (It may takes time to load data as hobby project): dogbook-delta.vercel.app
- Source: Client github.com/toihid/dogbook-client API github.com/toihid/dogbook-api
๐ถ 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.