{"id":18572120,"url":"https://github.com/ceci-aguilera/rate-my-racket","last_synced_at":"2026-02-28T20:03:09.636Z","repository":{"id":105156698,"uuid":"482425887","full_name":"Ceci-Aguilera/rate-my-racket","owner":"Ceci-Aguilera","description":"Rate My Racket is a Django + Next js (React js) Website to help tennis players to rate and find their perfect racket. It uses Django and Django Rest Framework as Backend API","archived":false,"fork":false,"pushed_at":"2022-04-25T01:33:31.000Z","size":5560,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-29T13:47:09.219Z","etag":null,"topics":["bootstrap5","django","django-react","django-react-social-login","django-rest-framework","django-social-network","docker","docker-django","knox-tokens","next","nextjs","postgresql","social-network","tennis","tennis-players","token-authetication"],"latest_commit_sha":null,"homepage":"https://rate-my-racket.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ceci-Aguilera.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-04-17T04:27:27.000Z","updated_at":"2023-09-12T06:47:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"29c5d986-c4dd-4c66-842a-d3f845957437","html_url":"https://github.com/Ceci-Aguilera/rate-my-racket","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ceci-Aguilera/rate-my-racket","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ceci-Aguilera%2Frate-my-racket","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ceci-Aguilera%2Frate-my-racket/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ceci-Aguilera%2Frate-my-racket/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ceci-Aguilera%2Frate-my-racket/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ceci-Aguilera","download_url":"https://codeload.github.com/Ceci-Aguilera/rate-my-racket/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ceci-Aguilera%2Frate-my-racket/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29951082,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T18:42:55.706Z","status":"ssl_error","status_checked_at":"2026-02-28T18:42:48.811Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap5","django","django-react","django-react-social-login","django-rest-framework","django-social-network","docker","docker-django","knox-tokens","next","nextjs","postgresql","social-network","tennis","tennis-players","token-authetication"],"created_at":"2024-11-06T23:05:04.876Z","updated_at":"2026-02-28T20:03:09.627Z","avatar_url":"https://github.com/Ceci-Aguilera.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Rate My Racket\n\n![React Image](./screenshots/Rate_My_Racket_Logo.png)\n\n![Python version](https://img.shields.io/badge/Python-3.10.8-4c566a?logo=python\u0026\u0026longCache=true\u0026logoColor=white\u0026colorB=pink\u0026style=flat-square\u0026colorA=4c566a) ![Django version](https://img.shields.io/badge/Django-4.0.4-4c566a?logo=django\u0026\u0026longCache=truelogoColor=white\u0026colorB=pink\u0026style=flat-square\u0026colorA=4c566a) ![Django-RestFramework version](https://img.shields.io/badge/Django_Rest_Framework-3.13.1-red.svg?longCache=true\u0026style=flat-square\u0026logo=django\u0026logoColor=white\u0026colorA=4c566a\u0026colorB=pink) ![PostgreSQL version](https://img.shields.io/badge/PostgreSQL-12.8-red.svg?longCache=true\u0026style=flat-square\u0026logo=postgresql\u0026logoColor=white\u0026colorA=4c566a\u0026colorB=pink) ![Next js version](https://img.shields.io/badge/Next.js-12.1.5-red.svg?longCache=true\u0026style=flat-square\u0026logo=next.js\u0026logoColor=white\u0026colorA=4c566a\u0026colorB=pink)\n\n\u003c/div\u003e\n\n## Table of Contents\n1. [Description](#description)\n1. [Tech Stack and Packages Installed](#tech_stack)\n1. [Install (Run) with Docker](#docker)\n1. [Install without Docker](#install)\n1. [Structure for Docker-Compose Explained](#structure)\n1. [Django Files and Folders of Interest](#django)\n1. [React Files and Folders of Interest](#nextjs)\n1. [About Nginx Configuration](#nginx)\n1. [Useful Links](#useful_links)\n1. [Contributing](#contributing)\n1. [Screenshots](#screenshots)\n\n\n\u003ca name=\"description\"\u003e\u003c/a\u003e\n## Description\n\n### What is Rate My Racket?\nRate My Racket is a website that helps tennis players to find the right racket for them based on the specs they are looking for. To so, it offers a rating system that takes into account averages of ratings, the amount of users that have given an opinion about the racket, and how many times a racket has been considered as one of the 3 top choices for a feature and in what position.\n\n### Why Rate My Racket?\nFinding a new tennis racket can be challenging and tricky even for advance tennis players as there are plenty of options for all playing styles, wights, and budgets. To select the best racket for a player, many parameters have to be taken into account, from the physical characteristics of the racket (weight, balance, string patters, ...) to the player own style and propose of use. As many rackets share similar specs, reading about player's pass experiences can become helpful to decide. With this in mind, Rate My Racket allows users to both rate rackets and share their experience while playing on the court. I started this project while having trouble deciding between a __Head Graphene 360+ Instinct MP__ or a __Head Graphene 360+ Speed MP__, which is a perfect example of how deciding even between well-known rackets can be tricky.\n\n\n\u003ca name=\"tech_stack\"\u003e\u003c/a\u003e\n## Tech Stack and Packages Installed\n\n- __Django:__ This is the backbone of the backend api, and has the following packages installed:\n    - Django Rest Framework (For the Rest API)\n    - Pillow (For managing images uploading)\n    - Django-Cors-Headers (For the CORS config to allow React js to make calls)\n    - Django-Environ (To Fetch the environment variables in the settings.py files)\n    - Psycopg2-binary (To manage the PostgreSQL Database)\n    - Gunicorn (To manage the running instance of the django web app)\n    - Django-Rest-Knox (To manage Token Based Authentication)\n\n    __Note:__ All this packages are specified in the _requirements.txt_ file inside the __django_backend__ folder. Links to their official documentation can be found at the [Useful Links](#useful_links) section.\n\n- __Next js:__ The frontend framework in use based on React js. This was created via ``npx create-next-app``. The only extra packages that were installed (ignoring the ones that are automatically pre-installed) are:\n    - Bootstrap and React-Bootstrap (For styling)\n    - Axios (To make calls to the Django Backend)\n\n- __Nginx:__ This is the server for the Docker-Compose testing build. The default configuration in use can be found at the __nginx/nginx.conf__ file.\n\n- __PostgreSQL:__ This is the default configured database for this repository. A link to _How to install/configure it for Linux/Windows/MacOS_ is included in the [Useful Links](#useful_links) section (This is only necessary for when not running with docker-compose). In addition, a link to _How to change to MySQL in Django_ is included as well in the [Useful Links](#useful_links) section.\n\n\n\u003ca name=\"docker\"\u003e\u003c/a\u003e\n## Install (Run) with Docker\n\n1. Clone the repo:\n    ```bash\n    git clone https://github.com/Ceci-Aguilera/rate-my-racket.git\n    ```\n1. Copy a default setup of the environment variables for the project:\n    ```bash\n    cp example_env .env\n    cp rate-my-racket-frontend/example_env rate-my-racket-frontend/.env.local\n    cp rate_my_racket_backend/rate_my_racket_backend/settings/example_env rate_my_racket_backend/rate_my_racket_backend/settings/.env\n    ```\n1. (optional) Edit the values in the previous copied files to create a custom config. Note that the one set by default should work just fine for development.\n1. Run Docker-Compose:\n    ```bash\n    docker-compose up -d --build\n    ```\n\n    Congratulations !!! The app should be up and running. To access the __Next js__ frontend go to [localhost:3000](http://localhost:3000), and to access the __Django__ backend go to [localhost:80](http://localhost:80).\n\n1. (optional) To create a super user:\n    ```bash\n       docker-compose run backend ./manage.py createsuperuser \n    ```\n\n\u003ca name=\"install\"\u003e\u003c/a\u003e\n## Install without Docker\n\n1. Clone the repo:\n    ```bash\n    git clone https://github.com/Ceci-Aguilera/rate-my-racket.git\n    ```\n\n1. Copy a default configuration of the environment variables for Django:\n    ```bash\n    cp rate_my_racket_backend/rate_my_racket_backend/settings/example_env rate_my_racket_backend/rate_my_racket_backend/settings/.env\n    ```\n1. (optional) Edit the values in the previous file that was copied to create a custom config. Note that the one set by default should work just fine for development.\n\n1. Set up the database. In this case the one in use by default is PostgreSQL. Assuming that PostgreSQL is already installed in the OS, and that the needed configurations for PostgreSQL to run in the OS are done, create a database and an user using the credentials specified in the __rate_my_racket_backend/rate_my_racket_backend/settings/.env__ file that was just created/edited.\n__Note:__ To now how to install and configure PostgreSQL, see the [Useful Links](#useful_links) section of this documentation. \n\n1. Change the default settings.py file in use from docker to development. To do this, go to the file __rate_my_racket_backend/rate_my_racket_backend/settings/\\_\\_init\\_\\_.py__ and modify the line\n    ```python\n    from .docker import *\n    ```\n    to\n    ```python\n    from .dev import *\n    ```\n\n1. Create and activate a virtual environment (See the [Useful Links](#useful_links) section if not know how)\n\n1. Install the necessary dependencies\n    ```bash\n    cd rate_my_racket_backend\n    pip install -r requirements.txt\n    ```\n\n1. Run Django:\n    ```bash\n    cd rate_my_racket_backend\n    python manage.py makemigrations\n    python manage.py migrate\n    python manage.py runserver\n    ```\n\n1. To configure React, from the project root folder go to __rate-my-racket-frontend__ and install the necessary dependencies:\n    ```bash\n    cd rate-my-racket-frontend\n    npm install\n    ```\n\n\n1. Run React while inside the __rate-my-racket-frontend__ folder:\n    ```bash\n    npx next dev\n    ```\n\nCongratulations !!! The app should be up and running. To access the __Next js__ frontend go to [localhost:3000](http://localhost:3000), and to access the __Django__ backend go to [localhost:8000](http://localhost:8000).\n\n\n\u003ca name=\"structure\"\u003e\u003c/a\u003e\n## Structure for Docker-Compose Explained\n\nThis repository is divided into 3 main folders (not counting the .readme_assets as it contains only the images displayed in the Readme). These folders are:\n- __rate_my_racket_backend:__ Has the Django project created with ``django-admin startproject``.\n- __rate-my-racket-frontend:__ Has the Next js project create with ``npx create-next-app``.\n- __nginx:__ Has the Dockerfile used in the docker-compose.yml file and the default config to run Django + Next js. When running the project locally without Docker this folder can be ignored.\n\nEach project (Django and Next js as separate projects) is intended to be self contained, and so it can be separately tested  without the need of docker-compose.\n\nWhen running with __Docker Compose__, there are 4 images that are created: A Django backend Image, a Next js frontend Image, a Nginx Image, and a PostgreSQL Image. The Dockerfiles for Django, Next js, and Nginx can be found in their respective folders, i.e, the Django Dockerfile is inside the rate_my_racket_backend folder, and so on. The PostgreSQL image has no custom Dockerfile, instead it is pulled from the Docker Hub, and the environment variables for the docker-compose file can be found at the .env file in the project root folder. This repository does not include that file, instead it offers an example_env file that can be renamed to .env and it should work out of the box (the default environment variables set do not need to be modified).\n\n\n\n\n\n\u003ca name=\"django\"\u003e\u003c/a\u003e\n## Django Files and Folders of Interest\nSo far, there is no app created for Django, and so, the only important folder so far is the settings folder inside the __rate_my_racket_backend/rate_my_racket_backend__ folder. This contains different settings.py files for different environment. For example, the dev.py file has the default settings to run in the development environment, while the docker.py file has the default settings to run when using docker-compose. All of these files has the base.py file as their parent file (the base.py file has the settings to be shared among the environments), and so they all should have\n\n```python\nfrom .base import *\n```\n\nas their first line. To change between environments, go to the __rate_my_racket_backend/rate_my_racket_backend/\\_\\_init\\_\\_.py__ file and edit its first line. By default it should be\n\n```python\nfrom .docker import *\n```\n\nTo change to the environment ``x``, replace that line with\n\n```python\nfrom .x import *\n```\n\nNext, the __templates__, __static__, and __media__ folders have been created (and configured in the settings) to store the hml, css, ... files.\n\nThe Django Project only has 2 apps in use, the accounts_app to manage users, and the comments_rackets_app to manage the comments and ratings of the rackets.\n\n\u003ca name=\"nextjs\"\u003e\u003c/a\u003e\n## Next js Files and Folders of Interest\n\nAside from the __package.json__ and the __src/index.js__ files there are no other edited files in this folder.\n\nThe following structure is used by the owner of this repository when working on the Next js project:\n```text\n    rate-my-racket-frontend\n        |____ components\n        |____ pages\n        |____ styles\n        |____ assets\n```\n\nInside the pages folder, there should be a folder named credentials, that managed the user-account related views, such as register, login, view account, ...\n\nThe rest of the folder are racket-related, which means that they contain the views related to the comments, ratings, ... of  the rackets. The grids, cards, and other constructions used to display the comments and the rackets are implemented as components, and so they can be found at the components folder. However, some of the pages that do not required heavy UI/UX components have the components embedded as part of the code instead of having them imported from the components folder.\n\nThe context folder has the AuthContext file used to globally manage the user states.\n\nAll the axios calls are implemented at the pages (not at the components), and sometimes so the pages pass properties and helper functions to the components.\n\n\n\n\u003ca name=\"contributing\"\u003e\u003c/a\u003e\n## Contributing\n\nInputs and contributions to this project are appreciated. To make them as transparent and easy as possible, please follow this steps:\n\n- ### How to contribute:\n    1. Fork the repo and create your branch from master\n    1. Clone the project to your own machine\n    1. Commit changes to your own branch\n    1. Update documentation\n    1. Push your work back up to your fork\n    1. Submit a Pull request\n\n- ### How to report a bug:\n    1. Open a new Issue.\n    1. Write a bug report with details, background, and when possible sample code. That's it!\n\n\n\u003ca name=\"useful_links\"\u003e\u003c/a\u003e\n## Useful Links\n\n### PostgreSQL and other Databases\n- Install/Setup Database in Linux: [Digital Ocean Link for Django Deployment on VPS](https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-16-04)\n- Install/Setup in Windows: [guru99.com Link](https://www.guru99.com/download-install-postgresql.html)\n- Install/Setup in MAC OS: [postgresqltutorial.com Link](https://www.postgresqltutorial.com/postgresql-getting-started/install-postgresql-macos/)\n- [Django with MySQL](https://dev.to/sm0ke/how-to-use-mysql-with-django-for-beginners-2ni0)\n\n### Docker\n- [Docker Oficial Documentation](https://docs.docker.com/)\n- Dockerizing Django, PostgreSQL, guinicorn, and Nginx:\n    - Github repo of sunilale0: [Link](https://github.com/sunilale0/django-postgresql-gunicorn-nginx-dockerized/blob/master/README.md#nginx)\n    - My repo to Dockerize Django + MySQL + Nginx + React js: [Ceci-Aguilera/django-react-nginx-mysql-docker](https://github.com/Ceci-Aguilera/django-react-nginx-mysql-docker)\n    - Michael Herman article on testdriven.io: [Link](https://testdriven.io/blog/dockerizing-django-with-postgres-gunicorn-and-nginx/)\n### Django and DRF\n- [Django Official Documentation](https://docs.djangoproject.com/en/4.0/)\n- Generate a new secret key: [Stackoverflow Link](https://stackoverflow.com/questions/41298963/is-there-a-function-for-generating-settings-secret-key-in-django)\n- Modify the Django Admin:\n    - Small modifications (add searching, columns, ...): [Link](https://realpython.com/customize-django-admin-python/)\n    - Modify Templates and css: [Link from Medium](https://medium.com/@brianmayrose/django-step-9-180d04a4152c)\n- [Django Rest Framework Official Documentation](https://www.django-rest-framework.org/)\n- More about Nested Serializers: [Stackoverflow Link](https://stackoverflow.com/questions/51182823/django-rest-framework-nested-serializers)\n- More about GenericViews: [Testdriver.io Link](https://testdriven.io/blog/drf-views-part-2/)\n- [Django Pillow](https://pillow.readthedocs.io/en/stable/)\n- [Django-Cors-Headers](https://pypi.org/project/django-cors-headers/)\n- [Django-Environ](https://pypi.org/project/django-environ-2/)\n- [Psycopg2-binary](https://pypi.org/project/psycopg2-binary/)\n- [Gunicorn](https://pypi.org/project/gunicorn/)\n\n### Next js\n- [Next js Official Documentation](https://nextjs.org/)\n- [Bootstrap Official Documentation](https://getbootstrap.com/)\n- [React-Bootstrap Documentation](https://react-bootstrap.github.io/)\n- [Axios Documentation](https://axios-http.com/docs/intro)\n\n### Miscellaneous\n- Create Virual Environment with Virtualenv and Virtualenvwrapper: [Link](https://docs.python-guide.org/dev/virtualenvs/)\n- [Configure CORS](https://www.stackhawk.com/blog/django-cors-guide/)\n- [Setup Django with Cloudinary](https://cloudinary.com/documentation/django_integration)\n\n\n\n\n\n\u003ca name=\"screenshots\"\u003e\u003c/a\u003e\n## Screenshots\n\n\u003cdiv align=\"center\"\u003e\n\n![Mobile Image](./screenshots/Mobile_1.png) ![Mobile Image](./screenshots/Mobile_2.png) ![Mobile Image](./screenshots/Mobile_3.png)\n\n![Mobile Image](./screenshots/Mobile_4.png) ![Mobile Image](./screenshots/Mobile_5.png) ![Mobile Image](./screenshots/Mobile_6.png)\n\n---\n\n\n![Desktop Image](./screenshots/Desktop_1.png)\n\n---\n\n![Desktop Image](./screenshots/Desktop_2.png)\n\n---\n\n![Desktop Image](./screenshots/Desktop_3.png)\n\n---\n\n![Desktop Image](./screenshots/Desktop_4.png)\n\n---\n\n![Desktop Image](./screenshots/Desktop_5.png)\n\n---\n\n![Desktop Image](./screenshots/Desktop_6.png)\n\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fceci-aguilera%2Frate-my-racket","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fceci-aguilera%2Frate-my-racket","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fceci-aguilera%2Frate-my-racket/lists"}