3salles/rankaa

College sport website

Rankaa

This website was created during the subject Software Design and Development at UFMA.

🇺🇸English · 🇧🇷Portuguese

🗂 Table of Contents

• About the Project
  • Diagrams
  • Layout
  • Technologies
  • Features
• Installation
  • Prerequisites
  • Front-end
    • Installing Dependencies
    • Running Front-end
  • Back-end
    • Installing Dependencies
    • Setting Back-end
    • Running Back-end
• License
• Authors

📖 About The Project

Rankaa is a website developed during the University subject Software Design and Development applying the concepts learned into classes.

Rankaa was created to follow the university championship: the user can see games, modalities, teams and rank (by modality or general); the organizer can register, edit and delete games and teams.

Games: The user can see date, time, place, the teams who going to play and the modality.

University Team: The user can see social medias, name, logo, course, registered modalities and ranking in each modality.

Modalities: The user can follow games and results by modality registered into the campionship.

🗒️ Diagrams

• Use Case Diagram:

  

  • Class Diagram:

  

  • Sequence Diagram:

  

  • State Diagram:

  

🎨 Layout

You can access the project's layout in link below:

• Layout

Because of time, the creation of the mobile system was prioritized, so it may possible has bugs in desktop version.

🚨 You need have a Figma account to acess the layout.

💻 Technologies

• TypeScript
• React.js
• Yarn
• Axios
• React-hook-forms
• Yup
• Flask
• TinyDB

✨ Features

• Desktop Version
• Mobile Version

🧱 Installation

This project use Node.js, Yarn, Python and Pipenv, you will need them to build its dependencies.

🚧 Prerequisites

Clone this project repository:

$ git clone https://github.com/3salles/rankaa.git

# Enter in `rankaa` folder:

$ cd rankaa

🚨 If you don't have git in your machine, you can install it here.

💄 Front-end

🚧 Installing Dependencies

In rankaa folder, open frontend folder:

$ cd frontend

# And install dependencies by the following command:

$ yarn install

▶️ Running Front-end

Run the following command to see the application:

$ yarn start

The application will be available on http://localhost:3000.

🚨 Remember to start the backend!

🗄️ Back-end

🚧 Instalando Dependências

🚨 This project use Python 3.

Inside rankaa folder, open new.backend folder:

$ cd new.backend

# Install Pipenv if you don't have it:

$ pip install pipenv

🔧 Setting Back-end

Into new.backend folder, create a .env file:

$ touch .env

Add the following content into the .env:

FLASK_APP=app.py
FLASK_ENV=development

▶️ Running Back-end

In the terminal, active the environment with:

# To install dependencies

$ pipenv install

# To active virtual environment

$ pipenv shell

# To run backend

$ flask run

The Application will be avaible on http://localhost:5000.

📄 License

This project uses MIT license.

👩‍💻 👨‍💻 Authors

Developed with 💜