dkm94/soccer-website-ts

Soccer website, providing news and matches results

About the project • Links • Built with • Project folder description • Development guide • Credits

Table of contents

• Table of contents
• About the project
• Links
  • Figma
  • Trello
• Built with
• Project folder description (src)
• Development guide
  • Prerequisites
  • Installation
• Credits

About the project

During my last year of training in computer design and development, we had to present a free project. I decided to go for a soccer website, providing news and matches results. Being a soccer fan myself, I wanted to work on a project that animates me and find new visuals.

Links

Figma

You can see the evolution of the project via Figma. The drafts contain:

• Mock-ups of the first version (presented at school)
• Mock-ups of the second version (developed in my spare time after getting my degree)
• Designs (icons, logos, moodboard...)
• Presentation support, containing some diagrams (in its first version)

✐ Visuals: https://www.figma.com/file/8WgQuNX3rIicR8ZLqHVYod/Soccer?type=design&node-id=0%3A1&t=3eFeRSvXqnsVCsQD-1
✐ Presentation : https://www.figma.com/file/GzDt6mZH8dMBC4nituPpfD/2LEFOOT-Presentation?type=design&t=3eFeRSvXqnsVCsQD-1

Trello

I use Trello or Evernote to organize my work. You will find the list of remaining and completed tasks.

📝 Trello (🇫🇷): https://trello.com/b/1adWasWA

Built with

Frontend

• 
• 
• 

Backend/Database

• 
• 
• 

Hosting

• 
• 

Project folder description (src)

• Components: reusable components
• Context: context for sections appearing in multiple pages
• Data: json static data
• Images: seeds, icons and other static image contents
• Pages: pages layouts and their components
• Router: routing and redirection components
• Seeds: static data
• Services: queries and mutations
• Styles: custom style vars for CSS and Material UI
• Utils: custom hooks and other reusable functions

Development guide

Prerequisites

Make sure you have Node and NPM installed. Open your terminal, and type either of the following commands:

• Installation for Linux (Debian, Ubuntu):

# Here, we're installing Node.js v18
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -

sudo apt-get install -y nodejs

• Installation for MacOS

brew install node

• Installation for Windows Please download Node from the offical website: https://nodejs.org/en/download

Once installed, you can verify Node and NPM versions with the following commands:

Node --version

npm --version

Then, as this app uses a public soccer API, you need a API key to display soccer informations.

Get a free API Key at https://www.football-data.org/client/register

Installation

1. Clone the repository

   git clone https://github.com/dkm94/soccer-website-mern.git

2. Install NPM packages

   npm install

3. Create a .env file and create a variable with your api-football.org API key

   # You must create a custom environment variable beginning with REACT_APP_
   REACT_APP_FOOTBALL_API_KEY='YOUR_API_KEY';

4. To run the app in development mode, use the command:

   npm start

Credits

Diane M.