Quotes Application

This is a full-stack web application built with React.js and Django. The application allows users to view, add, and manage quotes.

Table of Contents

• Features
• Technologies
• Prerequisites
• Setup
  • Backend Setup (Django)
  • Frontend Setup (React)
• Running the Application
• Usage
• Contributing
• License

Features

• View a list of quotes
• Add new quotes
• Edit existing quotes.
• Delete quotes
• Responsive design

Technologies

• Frontend: React.js, Tailwind css
• Backend: Django, Django REST Framework, CORS
• Database: SQLite (default, can be changed)
• Other: Docker (optional for containerization)

Prerequisites

• Python (3.8 or above)
• Node.js (14.x or above) and npm (6.x or above)
• Git
• (Optional) Docker and Docker Compose

Setup

Backend Setup (Django)

1. Clone the repository:

   git clone https://github.com/CodeQuillCrafts/Quotes-Application/tree/main
   cd Quotes-Application

2. Create a virtual environment and activate it:

   python -m venv ./env
   cd env/scripts
   activate

3. Install the required Python packages:

   cd server
   pip install -r requirements.txt

4. Set up environment variables:

   Create a .env file in the server folder of your project and add the following variables:

   SECRET_KEY=SECRET_KEY
   DEBUG=True
   ALLOWED_HOSTS=localhost,127.0.0.1
   CORS_ALLOWED_ORIGINS=http://localhost:5173

5. Run migrations and create the database:

   python manage.py makemigrations
   python manage.py migrate

6. Create a superuser (optional but recommended for accessing the Django admin interface):

   python manage.py createsuperuser

7. Run the Django development server:

   python manage.py runserver

Frontend Setup (React)

1. Navigate to the client directory:

   cd..
   cd client

2. Install the required npm packages:

   npm install

3. Start the React development server:

   npm run dev

Running the Application

With both servers running, you can access the application in your web browser:

• Django backend API: http://localhost:5173/
• React frontend: http://localhost:3000/

Usage

• View Quotes: Navigate to the main page to see a list of quotes.
• Add Quotes: Use the form provided on the main page to add a new quote.
• Delete Quotes: Each quote has a delete button that allows you to remove it from the list.

Contributing

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature-name).
3. Commit your changes (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature/your-feature-name).
5. Open a Pull Request.

License

This project is licensed under the MIT License. See the LICENSE file for more information.

---

This README provides a comprehensive guide to setting up and running the Quotes Application locally. If you encounter any issues or have questions, please feel free to open an issue on the repository.