Joke-O-Meter is a web application wher users can rate jokes based on their preferences, swiping right for jokes they like and left for those they do not. After evaluating a set of jokes, the application analyzes the user's preferences and assigns them a unique Jokometian character, each with its own set of traits reflecting the user's humor style. This project is split into two main components: a Django REST API backend for handling data and business logic, and a React frontend for interactive UI/UX.
- Browse through a curated list of jokes.
- Rate jokes as like or dislike.
- Receive a personalized Jokometian character based on joke preferences.
- Share your Jokometian character with others.
- Jokometians ranking
- Python 3.8 or higher
- pip (Python package installer)
- Node.js and npm (for the React frontend)
- Clone the repository:
git clone https://github.com/yourusername/joke-o-meter.git
- Navigate to the project directory:
cd joke-o-meter
- Install the required Python packages:
pip install -r requirements.txt
- Create a
.env
file in the root directory of the project and populate it with necessary environment variables:DJANGO_SECRET_KEY=your_secret_key DJANGO_DEBUG=True DB_NAME=your_db_name DB_USER=your_db_user DB_PASSWORD=your_db_password DB_HOST=localhost DB_PORT=5432 OPENAI_API_KEY=(optional)
- Run migrations to set up the database:
python manage.py migrate
- Populate with fake data
python manage.py populate_db
- Run and compile translations
django-admin compilemessages
- Navigate to the
front
directory:cd front
- Install the required npm packages:
npm install
- Start the Django development server:
The API will be available at
python manage.py runserver
http://localhost:8000
.
- Ensure you are in the
front
directory:cd front # If not already in the front directory
- Start the React development server:
The frontend will be available at
npm start
http://localhost:3000
.
Refer to http://localhost:8000/swagger/
for detailed API documentation.
The application currently supports English and Spanish. To add additional languages, follow the steps below. This example demonstrates adding French.
-
Generate Message Files: Run the following command to generate the
.po
file for the new language (French, in this example):django-admin makemessages -l fr
-
Translate Messages: Open the generated file located at
/locale/fr/LC_MESSAGES/django.po
. Translate the message strings from English to French, filling in the corresponding 'msgstr' for each 'msgid'. -
Compile Messages: After translating, compile the messages to apply the translations using:
django-admin compilemessages
For front-end localization:
-
Add Language File: Create a new language file for your translations,
translation.json
, in the translations folder (e.g.,/locales/fr/translation.json
). -
Translate Content: Fill
fr.json
with the translations. Use the existing English (or Spanish) translations as a reference. The file structure typically follows a key-value format, where keys match those used in your React components:{ "welcome": "Bienvenue", "description": "Ceci est une application localisée" }
-
Configure i18n: Ensure your i18n configuration includes the new language. This typically involves adding the new language to the list of available languages and possibly setting a detection order if you're using language detection:
i18n.use(initReactI18next).init({ resources, lng: "en", // Default language fallbackLng: "en", whitelist: ["en", "es", "fr"], // Available languages interpolation: { escapeValue: false } });
- Responsive Design: Ensure the application is fully responsive and provides an optimal viewing experience across a range of devices, including tablets and smartphones.
- User Interface Polish: Review and refine the UI elements for better visual appeal and usability. This includes button styles, form inputs, and navigation components.
- Component Tests: Expand the suite of React component tests to cover all user interactions and edge cases.
- Integration Tests: Develop front-end integration tests that simulate real user scenarios and interactions within the application. This will help ensure that the front-end components work seamlessly together.
- Keyboard Navigation: Improve keyboard navigation within the application to ensure that all interactive elements are accessible without the use of a mouse.
Contributions to address these tasks are highly valued.