React-Django Blog: A Dynamic Multilingual Experience with Dark Mode and Responsive Design

Overview:

This project showcases a modern and responsive blog page created using React and Django. The blog incorporates key features such as Dark Mode for enhanced readability, ensuring a pleasant user experience across different devices.

Features:

• Dark Mode: Enjoy a visually comfortable reading experience in low-light environments with the Dark Mode feature.
• Responsive Design: The blog is designed to adapt seamlessly to various screen sizes, providing an optimal viewing experience on desktops, tablets, and mobile devices.
• Multilingual Support: The blog is available in both English and Spanish, offering a user-friendly interface for a diverse audience. Users can effortlessly switch between languages to access content in their preferred language.

Technologies Used:

• Frontend: React.js
• Backend: Django
• Styling: Tailwind CSS
• Internationalization: i18next for language translation

---

Warning

Prerequisites

Make sure you have the following tools installed before running the project:

• Python 3.x
• Node.js
• npm (installed automatically with Node.js)

Important

Project Setup

1. Clone this repository:

git clone https://github.com/MojeZcg/ReactDjango-Blog
cd ReactDjango-Blog

2. Set up the virtual environment and Python dependencies:

python -m venv venv
source venv/bin/activate (or "venv\Scripts\activate" on Windows)
pip install -r requirements.txt

3. Set up Node.js dependencies:

npm install

4. Set up the build for the django server:

npm run build

Running the Application

Start the Django server with the virtualenv activated:

python manage.py runserver

or Start the React development server :

npm run start

The application will be available at http://localhost:8000/ (or "http://localhost:3000/" with React dev Server).

Environment configuration

1. Copy the .env.example file and rename it to .env.
2. Fill in the environment variables in the .env file as necessary.

Contributions

Note

If you want to contribute to this project, follow these steps:

1. Create a branch for your feature or bug fix:

git checkout -b your-branch-name

2. Make your changes and commit:

git add .
git commit -m "Description of your changes"

3. Push your changes to the repository:

git push origin your-branch-name

4. Open a pull request on GitHub.

Contact

For questions or issues, contact me via Email.

License

This project is open-source and available under the Apache-2.0 LICENCE.