MyBookList App is a web application for managing your personal book collection. The application is built using Vue.js 3 and TypeScript, with PocketBase as the backend database solution. This application allows users to register, log in, view, add, edit, and delete books. It also includes authentication and authorization features to ensure that only logged-in users can manage the book collection.
- Technologies Used
- Features
- Project Structure
- Setup and Installation
- Usage
- Screenshots
- Future Improvements
- Contributing
- License
- Vue.js 3: A progressive JavaScript framework for building user interfaces.
- TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
- PocketBase: An open-source backend alternative with a built-in database, authentication, and file storage.
- Pinia: A state management library for Vue.js applications.
- Axios: A promise-based HTTP client for making requests to the backend.
- Vue Router: The official router for Vue.js, used for navigating between different pages in the application.
- ESLint: A static code analysis tool for identifying problematic patterns found in JavaScript code.
- Prettier: An opinionated code formatter to ensure consistent code style.
- CSS: Used for styling the application and making it look modern and responsive.
- User Authentication: Users can register and log in to the application.
- Authorization: Only authenticated users can access the main features of the app, such as viewing and managing books.
- CRUD Operations: Users can create, read, update, and delete books from their collection.
- Responsive Design: The application is designed to work well on both desktop and mobile devices.
- Modals for Edit and Delete Confirmation: User-friendly modals are used for editing book details and confirming deletion of books.
The project is structured as follows:
my-vue-pocketbase-app/
├── public/
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ ├── router/
│ │ └── index.ts
│ ├── services/
│ │ └── api.ts
│ ├── stores/
│ │ └── auth.ts
│ ├── views/
│ │ ├── Books.vue
│ │ ├── HomePage.vue
│ │ ├── Login.vue
│ │ ├── Register.vue
│ └── App.vue
│ └── main.ts
├── .eslintrc.js
├── .prettierrc
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md
To set up and run this project locally, follow these steps:
Clone the repository and navigate into the project directory:
git clone https://github.com/umithavare/my-vue-pocketbase-app.git
cd my-vue-pocketbase-appInstall the required dependencies:
npm installDownload and extract PocketBase from the PocketBase website. You can place the extracted files in a directory of your choice.
Start the PocketBase server:
./pocketbase serveThis will start the PocketBase server on `http://localhost:8090\`.
Start the Vue development server:
npm run devThe application will be available at `http://localhost:3000\`.
- Go to the Register page by clicking the "Register" link on the Login page.
- Enter your email and password to create a new account.
- Enter your email and password to log in.
- After logging in, you will be redirected to the Home page.
- Click on the "Books" link in the navigation bar to view your book collection.
- Enter the title and author of the book in the provided form.
- Click the "Add Book" button to add the book to your collection.
- Click the "Edit" button next to a book to open the edit modal.
- Update the book details and click "Update Book" to save the changes.
- Click the "Delete" button next to a book to open the delete confirmation modal.
- Confirm the deletion to remove the book from your collection.
- Add user profile management.
- Implement pagination for the book list.
- Add search functionality to filter books.
- Improve error handling and display error messages to users.
- Enhance the UI/UX with additional animations and design improvements.
Contributions are welcome! Please fork the repository and submit a pull request for any improvements or bug fixes.
This project is licensed under the MIT License. See the LICENSE file for details.