- Table of contents
- About the project
- Links
- Built with
- Project folder description (src)
- Development guide
- Credits
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.
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
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
Frontend
Backend/Database
Hosting
- 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
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
- Clone the repository
git clone https://github.com/dkm94/soccer-website-mern.git
- Install NPM packages
npm install
- 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';
- To run the app in development mode, use the command:
npm start
Diane M.