search

Dima-Bulavenko / TechCore

0 stars 0 forks source link

readme

TechCore (Milestone Project 5)

Responsive Mockup

Table of contents

Table of contents generated with markdown-toc

Purpose

Table of contents

UX Design

Epics

User and Developer Stories

Back to the top

Wireframes

Home page

Profile page

Form page

Back to the Top

Agile Development

In this project, we use Agile methodology to manage and track development tasks. Here's a breakdown of how we apply Agile practices:

Task Management

Project Management

Workflow

  1. New Issues: All new issues are added to the Product Backlog milestone by default.
  2. Iteration Setup: When a new iteration begins, a new project board is created, and issues from the Product Backlog are selected and moved to the corresponding Iteration #number milestone.
  3. Execution: During the iteration, the team works on issues as per the priority labels and tracks progress on the GitHub Kanban board.
  4. Review: At the end of each iteration, completed issues are reviewed, and a new iteration is planned with updated priorities and tasks.

This structured approach ensures clear task prioritization and efficient tracking of progress throughout the development cycle.

Design

Color Scheme

This color scheme was chosen to create a clean and modern look for the website.

Color Scheme

Typography

This project uses the following Google Font:

Back to the top

Features

User Registration and Authentication

This project utilizes the Django allauth library to handle user registration, authentication, and account management, including social account integration.

User Profile and Notifications

Database Schema

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.

Database Schema of dictionary app Database Schema of dictionary app
Database Schema of whole project Database Schema of whole project

Back to the top

Testing

Manual Testing

Navbar

Footer

Home page

Profile page

Forms

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.

Back to the top

Unit testing

Python unit tests

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
Test results: Python unit tests
Test coverage: Python test coverage

JS unit tests

JS unit testing was performed through Jest. To run the tests, run the following command in the terminal:

npm test wordnest/static/js/__tests__/
Test results: JavaScript unit tests

Back to the top

Code validation

HTML Validation

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.

CSS Validation

To validate the CSS code, I use the W3 Jigsaw validator.

Python Validation

To validate the Python code I use Ruff VScode extension.

JS Validation

To validate the JS code I use [ESLint] VScode extension(https://eslint.org/).

Back to the top

Lighthouse

Back to the top

Technologies

Languages

Programs, frameworks, libraries

Back to the top

Environment Variables

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.

Deployment

Heroku

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:

  1. Navigate to your Heroku dashboard and create a new app with a unique name.

  2. 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.

  3. Install gunicorn as a production-ready webserver for Heroku with command.

    pip install gunicorn

  4. Create a file named Procfile at the root directory of the project.

  5. Add following command to Procfile to run your server in production.

    web: gunicorn wordnest.wsgi

    Note: Replace wordnest with your project name

  6. In the settings.py file update the ALLOWED_HOSTS variable.

    ALLOWED_HOSTS = ['127.0.0.1', '.herokuapp.com']

  7. Install dj-database-url.

    pip install dj-database-url

  8. Import dj-database-url in settings.py.

    import dj_database_url

  9. Install psycopg3 to connect to PostgreSQL database.

    pip install "psycopg[binary,pool]"

  10. 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

  11. 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>

  12. Reload your terminal and run the following command in terminal to migrate remote database.

    python manage.py migrate

  13. Replace DEBUG=False to DEBUG=True in the .env file.

  14. Return to the Heroku dashboard navigate to the Settings tab and click on Reveal Config Var and add DATABASE_URL environment variable.

  15. Install whitenoise to manage static files on production server.

    pip install whitenoise

  16. 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

  17. Add STATIC_ROOT and STORAGES variables to the settings.py.

    STORAGES = {
    "staticfiles": {
        "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
    },
}
STATIC_ROOT = BASE_DIR.joinpath("staticfiles")

  18. Run the following command in terminal to collect static files.

    python manage.py tailwind build
python manage.py collectstatic

  19. From the terminal, check the Python version used in your IDE.

    python --version

  20. Look up the supported runtimes here and copy the runtime closest to the one used in your IDE.

  21. Add a runtime.txt file to your app's root directory.

  22. Paste the copied runtime into the runtime.txt file.

  23. Update requirements.txt.

    pip freeze > requirements.txt

  24. Add and commit all changes to the repository.

    git add .
git commit -m "Deploying to Heroku"

  25. Push the changes to your remote branch that you intend to deploy.

    git push

  26. On the Heroku dashboard, and in your app, click on the Deploy tab.

  27. In the Deployment method section enable GitHub integration by clicking on Connect to GitHub.

  28. 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.

  29. 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.

  30. Open the Resources tab and choose an eco dyno. This dyno is a lightweight container to run your project.

  31. Verify there is no existing Postgres database add-on. if there is a database add-on select Delete Add-on to remove it.

  32. Click on Open app to view your deployed project.

Back to the top

Clone GitHub Repo

  1. Log into your account on GitHub
  2. Go to the repository of this project WordNest
  3. Click on the code button, and copy your preferred clone link.
  4. Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
  5. Type git clone into the terminal, paste the link you copied in step 3 and press enter.

Back to the top

Bugs

Back to top

Credits

Media

Back to the top

Design Template

Back to the top

Code

Back to the top

Acknowledgements

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.

Back to the top