Table of Contents
This project was inspired by Wordle, a game where you have to guess the correct word through the hints you get. Wordle was fun to play and I wanted to see how I can make my own version and put a twist to it. Being a K-pop fan, I wanted to create a fun and interactive game that combines the logic of Wordle with the massive world of K-pop idols! One important thing to mention is that this repository is for local development purposes and the production version of this application is on a private repository.
Frontend is made with HTML, CSS, JavaScript, and Bootstrap5. JavaScript fetches idol data from the backend through API calls and works with the frontend to display hints. Mostly used Bootstrap5 to style the application as it is much faster to code compared to CSS. However, CSS was used in the home page to create the animations for the game.
Backend is made with Django and Django Rest Framework. Created a RESTful API that fetches both a random idol and the complete dataset from a local JSON file, which is then serialized for the frontend. Django handles authentication and user profile management. This includes login, registration, user-profile uploads, and win counts. Also integrated Amazon S3 to store user uploaded media.
Database is PostgreSQL managed by Heroku and the application is also deployed on Heroku. Heroku Dynos manage server processes and Gunicorn is used as the production WSGI server which handles incoming requests. The domain name playkordle.com is bought from godaddy, and routes traffic directly to my deployed application.
-
Create a folder for the project and clone the repository into that folder:
git clone https://github.com/Ryan11c/kordle.git
-
Navigate to the folder. Create and activate a virtual environment making sure to use python version 3.12.3. This ensures all packages will work:
python -m venv venv # <- on windows or on mac/linux -> python3 -m venv venv . venv/Scripts/activate #on mac/linux -> source venv/bin/activate
-
Navigate into the
kordlefolder and install required packages:cd kordle pip install -r requirements.txt
-
Create a
.envfile in the root directory of Kordle and put your secret key inside the.envfile:DEBUG=True SECRET_KEY=******* -
Apply migrations:
python manage.py makemigrations python manage.py migrate
-
Create new superuser:
python manage.py createsuperuser Username: admin Email address: admin@example.com Password: ********** Password (again): ********* Superuser created successfully.
-
Start the development server:
python manage.py runserver
-
Open your web browser and go to http://127.0.0.1:8000/ to explore the application.
The main objective of this game is to guess the random kpop idol generated by the backend. First we type the name of a K-pop idol and see the feedback we get. Every idol has these categories: Icon, Group, Birthday, Height(cm), Gender, Company, and Nationality. The game will see which categories are correct or incorrect and display accordingly. If you guess correctly and you are logged in, your win count increases and is saved to your profile.
Displays various statistics such as leaderboard, sign-up chart, and request-per-day chart. Leaderboard was created using bootstrap and django template tags while the charts were made from chart.js
Django template tags loop through the Profile objects and dynamically render each profile on the page. To enhance performance I added pagination to display 10 profiles per page.
Simple bootstrap template to create the register and sign-in pages. You can check it out here.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Ryan Choi - ryanchoi4421@gamil.com
Project Link: https://github.com/Ryan11c/kordle