A simple yet powerful Bookmark Manager application that allows users to save and organize important web links. This project features a React frontend and a Strapi (Headless CMS) backend for robust data management.
- Add Bookmarks: Save bookmarks with a Title, URL, Category, and Description.
- Real-time Data Fetching: Seamlessly integrates with the backend using Axios.
- Component-Based Architecture: Modular React components for high maintainability.
- Headless CMS Integration: Powered by Strapi v5 for efficient API and database management.
- Clean UI: Styled with CSS Modules for a modern and responsive look.
- React.js: Library for building the user interface.
- Axios: For making API requests to the Strapi backend.
- CSS Modules: For encapsulated and scoped styling.
- Strapi v5: Headless CMS for managing the API and content.
- SQLite: Lightweight database (default with Strapi) for local storage.
To get a local copy up and running, follow these steps:
git clone [https://github.com/your-username/your-repo-name.git](https://github.com/your-username/your-repo-name.git)
2. Backend Setup (Strapi)
Navigate to the backend folder and install dependencies:
Bash
cd backend
npm install
npm run develop
Open the Admin Panel: http://localhost:1337/admin
Important: Ensure you have created a Bookmark Content-Type with fields: title, url, category, and description.
Permissions: Go to Settings > Users & Permissions Plugin > Roles > Public and enable find, findOne, and create for the Bookmark collection.
3. Frontend Setup (React)
Navigate to the frontend folder and start the development server:
Bash
cd frontend
npm install
npm start
The app will be running at: http://localhost:3000
📁 Folder Structure
Plaintext
├── frontend/ # React application source code
│ ├── src/
│ │ ├── components/ # Modular UI components (Card, Form, List)
│ │ ├── data/ # Mock data for initial testing
│ │ └── App.js # Main application logic & API calls
├── backend/ # Strapi CMS configuration and API
└── README.md # Project documentation
🤝 Contributing
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Show your support by giving a ⭐️ if you like this project!
Made with ❤️ by Subhro