sean-meade / Wookiee-Woo

0 stars 2 forks source link

Wookie Woo

Welcome to Wookie Woo: Where the Force is Strong with Love

Calling all Star Wars fans from galaxies near and far! Whether you're a Jedi, a Sith, or somewhere in between, Wookie Woo is your ultimate destination to find love among the stars. Here, you'll connect with people who share your passion for all things Star Wars.

Tired of debating whether Han shot first with people who just don't get it? Dreaming of meeting someone who loves the original trilogy as much as you do? Or maybe you're a fan of the entire Star Wars universe and want a partner who appreciates every corner of the galaxy?

Join us at Wookie Woo and embark on a journey where your Star Wars fandom leads the way. Our advanced onboarding survey helps you rank your preferences across the vast Star Wars media, ensuring you meet someone who truly understands your love for this epic saga.

Sign up now, complete the survey, and may the Force be with you on your quest for love!

Table of Contents

User Stories

Profile Management

Matching and Preferences

Additional Tasks and Features

Frontend Development

Backend Development

Miscellaneous

Go To The Top

Backend Models

profiles/models.py

This file (profiles/models.py) defines database models related to user profiles. It includes a CustomUser model derived from Django's AbstractUser, allowing for customization of user profiles. Fields such as force_alignment, gender, looking_for, and profile_icon are provided for users to specify their preferences and characteristics. Additionally, there's a UserProfile model linked to each user profile, enabling the storage of additional information like a user's biography (bio).

matchmaking/models.py

Contained within matchmaking/models.py, this file encompasses models associated with matchmaking features. One notable model is FilmResults, designed to store ratings of various Star Wars films provided by users. The fields within this model allow users to rate each film on a scale from 1 to 10, enabling matchmaking algorithms to recommend compatible users based on shared film preferences.

Go To The Top

Wireframes

Wireframes by Alma Isaksson

Go To The Top

Color Scheme

In designing the color palette for this project, a tertiary color wheel analysis approach was utilized. This method involves selecting a primary color, then finding secondary and tertiary colors that complement and enhance the overall aesthetic. Here's a breakdown of how the colors were chosen and their roles in the design:

Colors Used

Go To The Top

Reusable components

Home

Description: The Home component is the main landing page of the application. It displays a welcoming message and placeholder content that can be customized with additional components and information as needed for development purposes.

NavBar

Description: The NavBar component provides a responsive navigation bar for the application. It displays different navigation options based on the user's authentication status. Authenticated users see links to their profile and a sign-out option, while unauthenticated users see sign-in and sign-up options. The navigation bar collapses on smaller screens and can be toggled open or closed. The component also uses a custom hook to handle clicks outside the navbar to close it automatically.

Register

Description: The Register component provides a registration form for new users to create an account. It handles the registration process by taking the username, email, and password, validating the input, and submitting the data to the authentication context. Upon successful registration, a success toast notification is displayed, and the user is redirected to the login page. If the registration fails, an error toast notification is shown.

Login

Description: The Login component provides a login form for users to enter their credentials. It handles the authentication process by taking the username and password, submitting them to the authentication context, and navigating to the home page upon successful login. If the login attempt fails, an error message is logged.

UserDetail

Description: The UserDetail component fetches and displays detailed information about a specific user. It retrieves user data from the backend server based on the user ID extracted from the route parameters. Once the data is fetched, it is displayed within a Bootstrap Card component, showing the user's username, email, and bio. The component includes loading and error handling states to provide feedback to the user during the data fetching process.

EditProfile

Description: The EditProfile component allows users to update their profile information, including their username, email, and bio. Upon rendering, it fetches the user's profile data from the backend using the authentication token. Users can then modify their profile information in the form fields provided. Upon submission, the updated profile data is sent to the backend server via an Axios PUT request. Toast notifications are displayed to indicate the success or failure of the update operation.

DeleteProfile

Description: The DeleteProfile component provides functionality for users to delete their profile. It includes a button labeled "Delete Profile" that, when clicked, triggers the deletion process. Upon successful deletion, a toast notification is displayed indicating the success and the user is logged out. They are then redirected to the home page. If the deletion fails, an error toast notification is shown.

StarWarsSurvey

Description: The StarWarsSurvey component renders a form for users to fill out a Star Wars compatibility survey. It includes fields for users to select their preferences regarding the Star Wars trilogy, favorite character, movie or show, era, preferred faction, force ability, engagement level, importance of Star Wars in their life, openness to new media, and preferred date activity related to Star Wars. Upon submission, the form data is sent to the backend server via an Axios POST request to the http://localhost:5000/surveyResults endpoint.

Survey

Description: The Survey component renders a form for users to submit their ratings for two movies. Users can enter their ratings for each movie and submit the form. Upon submission, the survey data is sent to the backend server via an Axios POST request, including the ratings for the two movies, the user's username retrieved from the authentication context, and the authentication token. If the submission is successful, the user is redirected to the home page.

Ranking

Description: The Ranking component allows users to rate an item using a star rating system. It displays five stars, and users can hover over them to preview their rating or click to select a rating. Once a rating is selected, it is saved to the backend via an Axios POST request to the /api/rate endpoint, along with the item_id and the selected rating. The component utilizes state to manage the current rating value and the hover state for previewing ratings.

Go To The Top

Team Members

Go To The Top

Technologies Used

Backend

Database

Frontend

Deployment Platform

Go To The Top

Copyright links

Go To The Top

Deployment

Development Setup

To set up the project for development, follow these steps:

  1. Clone the Repository:

    git clone <repository-url>
    cd <repository-name>
  2. Create and Activate a Virtual Environment:

    # On macOS/Linux:
    python3 -m venv env
    source env/bin/activate
    
    # On Windows:
    python -m venv env
    .\env\Scripts\activate
  3. Install Backend Dependencies:

    pip install -r requirements.txt
  4. Create a .env File in the Root Directory:

    DEBUG=True
    SECRET_KEY=your-very-secret-key
    DATABASE_URL=postgres://username:password@hostname/databasename # Don't add this line if you want to default to SQLite
    ALLOWED_HOSTS=localhost,127.0.0.1
  5. Create a .env File directly in the frontend:

    REACT_APP_SITE_BASE_URL="http://127.0.0.1:8000/auth/"
  6. Apply Migrations:

    python manage.py makemigrations
  7. Apply Migrations:

    python manage.py migrate
  8. Run the Development Server:

    python manage.py runserver
  9. Set Up Frontend:

    cd frontend
  10. Install Frontend Dependencies:

    npm install
  11. Build the Frontend:

    npm run build
  12. Run the Frontend Server:

    npm start

Go To The Top

Seeding Demo Users

This project includes a custom Django management command to seed the database with demo users for testing and development purposes. Follow the steps below to use this command.

To Seed Demo Users

To seed the database with demo users, run the following command:

bash python manage.py seed_demo_users

Go To The Top

Production Build and Deployment

To prepare and serve the project for production, follow these steps:

  1. Create and Activate a Virtual Environment (if not already done):

    # On macOS/Linux:
    python3 -m venv env
    source env/bin/activate
    
    # On Windows:
    python -m venv env
    .\env\Scripts\activate
  2. Install Backend Dependencies:

    pip install -r requirements.txt
  3. Create a .env File in the Root Directory:

    DEBUG=False
    SECRET_KEY=your-very-secret-key
    DATABASE_URL=postgres://username:password@hostname/databasename
    ALLOWED_HOSTS=your-production-domain.com
  4. Apply Migrations:

    python manage.py migrate
  5. Collect Static Files:

    python manage.py collectstatic
  6. Build the Frontend:

    cd frontend
    npm install  # If not already done
    npm run build

    Make sure the build directory of your React app is inside the frontend directory.

Go To The Top

Attributions

The following is a list of third-party dependencies used in this project, along with their respective licenses and attributions:

Dependency License Attribution Required? Source/Documentation
asgiref==3.8.1 BSD-3-Clause No GitHub
dj-database-url==2.1.0 MIT No GitHub
Django==5.0.6 BSD No GitHub
django-cors-headers==4.3.1 MIT No GitHub
django-environ==0.11.2 MIT No GitHub
djangorestframework==3.15.1 BSD-3-Clause No GitHub
djangorestframework-simplejwt==5.3.1 MIT No GitHub
gunicorn==22.0.0 MIT No GitHub
packaging==24.0 BSD-3-Clause No GitHub
psycopg2==2.9.9 LGPL No GitHub
psycopg2-binary==2.9.9 LGPL No GitHub
PyJWT==2.8.0 MIT No GitHub
sqlparse==0.5.0 BSD No GitHub
typing_extensions==4.11.0 PSF No GitHub
tzdata==2024.1 Public Domain No IANA Time Zone Database
whitenoise==6.6.0 MIT No GitHub

Go To The Top