Table of contents generated with markdown-toc
User stories:
Developer stories:
In this project, we use Agile methodology to manage and track development tasks. Here's a breakdown of how we apply Agile practices:
Could Have
Must Have
Should Have
Would Have
Product Backlog
milestone by default.Product Backlog
are selected and moved to the corresponding Iteration #number
milestone.This structured approach ensures clear task prioritization and efficient tracking of progress throughout the development cycle.
This color scheme was chosen to create a clean and modern look for the website.
This project uses the following Google Font:
This project utilizes the Django allauth library to handle user registration, authentication, and account management, including social account integration.
The first schema is for the dictionary app, which includes models for dictionaries, words, and translations. The second schema is for the entire project, which includes models for user profiles, user dictionaries, and user translations.
For anonymous users:
For authenticated users:
For anonymous users:
For authenticated users:
All forms were created using one template so that they have the same styles and functionality. An anonymous user can see all forms except Set Password, Change Password, and Create Dictionary forms.
Unit tests was create with django built-in django test functionality. To run the tests, run the following command in the terminal:
python manage.py test
JS unit testing was performed through Jest. To run the tests, run the following command in the terminal:
npm test wordnest/static/js/__tests__/
To validate the HTML code, I use the W3C HTML Markup Validator. Since I use htmx in my project, the validator will show some errors related to the htmx attributes, but these can be ignored.
To validate the CSS code, I use the W3 Jigsaw validator.
To validate the Python code I use Ruff VScode extension.
To validate the JS code I use [ESLint] VScode extension(https://eslint.org/).
:heavy_check_mark: Welcome page
:heavy_check_mark: Register page
To run this project locally, you will need to create a .env
file in the root directory of the project and add the following environment variables:
SECRET_KEY=your_django_secret_key
DEBUG=True
DB_NAME=
DB_USER=
DB_PASSWORD=
DB_HOST=
DB_PORT=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
FACEBOOK_CLIENT_ID=
FACEBOOK_CLIENT_SECRET=
GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, FACEBOOK_CLIENT_ID, FACEBOOK_CLIENT_SECRET
used for user social authentication.
The WordNest project was deployed on a Heroku hosting server. The following steps outline the process of deploying the WordNest project and can be applied to deploy another Django project with minor adjustments:
Navigate to your Heroku dashboard and create a new app with a unique name.
Navigate to Settings in Heroku dashboard and click Add buildpacks and choose "nodejs". This buildpack is required to be at te top of the buildpack list.
Install gunicorn
as a production-ready webserver for Heroku with command.
pip install gunicorn
Create a file named Procfile
at the root directory of the project.
Add following command to Procfile
to run your server in production.
web: gunicorn wordnest.wsgi
Note: Replace wordnest
with your project name
In the settings.py
file update the ALLOWED_HOSTS
variable.
ALLOWED_HOSTS = ['127.0.0.1', '.herokuapp.com']
Install dj-database-url.
pip install dj-database-url
Import dj-database-url
in settings.py
.
import dj_database_url
Install psycopg3 to connect to PostgreSQL database.
pip install "psycopg[binary,pool]"
In the settings.py
replace DATABASES
with the following code:
if DEBUG:
DATABASES = {
"default": {
"ENGINE": "django.db.backends.postgresql",
"NAME": config("DB_NAME"),
"USER": config("DB_USER"),
"PASSWORD": config("DB_PASSWORD"),
"HOST": config("DB_HOST"),
"PORT": config("DB_PORT"),
}
}
else:
DATABASES = {
'default': dj_database_url.parse(config('DATABASE_URL'))
}
Note: Replace if
clause with your own database for local development
In the .env
file update the DEBUG
environment variable and add DATABASE_URL
new one.
DEBUG=False
DATABASE_URL=add_URL_of_a_remote_database
Note: For the WordNest I used database URL provided by Code Institute
but you can use other database hosting services< such as Amazon RDS for PostgreSQL/sub>
Reload your terminal and run the following command in terminal to migrate remote database.
python manage.py migrate
Replace DEBUG=False
to DEBUG=True
in the .env
file.
Return to the Heroku dashboard navigate to the Settings tab and click on Reveal Config Var and add DATABASE_URL
environment variable.
Install whitenoise to manage static files on production server.
pip install whitenoise
Add whitenoise
to the MIDDLEWARE
list in the settings.py
.
MIDDLEWARE = [
"django.middleware.security.SecurityMiddleware",
'whitenoise.middleware.WhiteNoiseMiddleware',
]
Note: The WhiteNoise middleware must be placed directly after the Django SecurityMiddleware
Add STATIC_ROOT
and STORAGES
variables to the settings.py
.
STORAGES = {
"staticfiles": {
"BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
},
}
STATIC_ROOT = BASE_DIR.joinpath("staticfiles")
Run the following command in terminal to collect static files.
python manage.py tailwind build
python manage.py collectstatic
From the terminal, check the Python version used in your IDE.
python --version
Look up the supported runtimes here and copy the runtime closest to the one used in your IDE.
Add a runtime.txt
file to your app's root directory.
Paste the copied runtime into the runtime.txt
file.
Update requirements.txt
.
pip freeze > requirements.txt
Add and commit all changes to the repository.
git add .
git commit -m "Deploying to Heroku"
Push the changes to your remote branch that you intend to deploy.
git push
On the Heroku dashboard, and in your app, click on the Deploy tab.
In the Deployment method section enable GitHub integration by clicking on Connect to GitHub.
Start typing your project repo name into the search box and click Search. A list of repositories from your GitHub account should appear. Click on the GitHub repo you want to deploy from.
Scroll to the bottom of the page in the Manual deploy section, choose branch you want to deploy and click Deploy Branch to start a manual deployment of the branch.
Open the Resources tab and choose an eco dyno. This dyno is a lightweight container to run your project.
Verify there is no existing Postgres database add-on. if there is a database add-on select Delete Add-on to remove it.
Click on Open app to view your deployed project.
git clone
into the terminal, paste the link you copied in step 3 and press enter.All fixed bugs can be found [here]()
All unfixed bugs can be found [here]()
I want to convey my immense gratitude to my mentor, Luke Buchanan, for pinpointing my mistakes and providing advice on how to rectify them. Special thanks to my friends who assisted in testing the application, and to the Slack community, always ready to offer valuable tips at any time.