Bookify

View Demo · Report Bug · Request Feature

Welcome to Bookify! This project harnesses the capabilities of Firebase and React to provide a seamless platform for book transactions, featuring an interactive and modern design for an enhanced user experience.

Table of Contents

• Overview
  • What is Bookify?
  • Demo Video
  • Technologies Used
  • Features
• Getting Started
  • Prerequisites
  • Installation
  • FirebaseContext Configuration
  • Available Scripts
• Project Structure
• Contributing
• Contact
• Acknowledgments

Overview

What is Bookify?

Bookify is designed with a focus on user experience and efficiency, utilizing Firestore for robust and scalable data storage. As a serverless application, Bookify offers unparalleled flexibility and scalability, making it an ideal choice for users seeking a modern and efficient book trading solution. Additionally, the integration of shadcn ensures a polished and dynamic user interface, enhancing the overall experience.

Demo Video

Bookify.Demo.mp4

Technologies Used

Features

• React: A powerful JavaScript library for building user interfaces.
• FirebaseContext: A comprehensive app development platform for managing databases, authentication, and hosting.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• Shadcn/UI: A UI component library for building beautiful interfaces.
• JavaScript: The programming language that powers the web.
• PostCSS: A tool for transforming CSS with JavaScript plugins.
• ESLint: Code linting to maintain consistent code quality.
• Prettier: Code formatting to ensure a consistent code style.

Getting Started

Prerequisites

• Node.js (>= 20.0.0)
• npm (>= 10.0.0) or yarn (>= 1.22.0)

Installation

1. Clone the repository:

   git clone https://github.com/RanitManik/Bookify.git
   cd bookify

2. Install dependencies:

   npm install

   or

   yarn install

FirebaseContext Configuration

To configure FirebaseContext for this project:

1. Go to the FirebaseContext Console.
2. Create a new project or use an existing one.
3. Navigate to the project settings and locate your FirebaseContext configuration.
4. Copy the configuration details and replace the placeholders in your .env.local file.

Available Scripts

In the project directory, you can run the following scripts:

npm run dev

Runs the app in development mode. Open http://localhost:5173 to view it in the browser.

npm run build

Builds the app for production to the dist folder. It correctly bundles React in production mode and optimizes the build for the best performance.

npm run lint

Lints the codebase using ESLint. This ensures your code adheres to specified linting rules and conventions. It checks .js and .jsx files, reports any unused disable directives, and sets the maximum number of warnings to 0.

npm run preview

Previews the production build locally. Useful for testing the production build before deploying.

npm run format

Formats the codebase using Prettier. It targets all .js and .jsx files within the src directory to ensure consistent code formatting.

Project Structure

The project structure is as follows:

bookify/
├── docs/ # Project Documentation
│   ├── firestore structure # Firestore database architecture
├── public/ # Public static assets
├── src/ # Main source code
│   ├── assets/ # Application assets (e.g., images, icons)
│   ├── components/ # Reusable React components
│   │   ├── ui/ # UI components (e.g., buttons, forms)
│   │   └── block/ # Custom reusable components
│   ├── context/ # React contexts for state management
│   ├── hooks/ # Custom React hooks
│   ├── index.css # Global styles
│   ├── App.jsx # Main application component
│   └── main.jsx # Entry point for React application
├── .env.example # Template for environment variables
├── .gitignore # Files and directories to be ignored by Git
├── .prettierrc # Prettier configuration file
├── index.html # HTML template for the app
├── LICENSE # License information
├── package.json # Project dependencies and scripts
├── package-lock.json # Lock file for dependencies
├── postcss.config.js # PostCSS configuration
├── README.md # Project documentation
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
├── tsconfig.node.json # TypeScript configuration for Node.js
└── vite.config.js # Vite configuration file

Contributing

We welcome contributions to enhance the Bookify project. To contribute:

1. Fork the repository.

2. Create a new branch for your feature or bug fix:

   git checkout -b feature-name

3. Make your changes and commit them with clear and descriptive messages.

4. Push your changes to your fork:

   git push origin feature-name

5. Create a pull request to the main repository, detailing the changes and enhancements you have made.

Contact

	Social Media	Username	Link
	Email	ranitmanik.dev@gmail.com	Email
	LinkedIn	Ranit Manik	LinkedIn
	Instagram	ranit_manik_	Instagram
	Facebook	RanitKumarManik	Facebook

Feel free to reach out if you have questions or just want to chat about web adventures!

Acknowledgments

This project wouldn't be possible without the collaboration and resources of the developer community. Thanks to the community and tools like React and Firebase. Special appreciation goes to friends and family. I hope it inspires further learning.

---

Thank you for reviewing Bookify! Happy coding! 📚🚀