https://github.com/martinwebdev95/thefootballhub

Project that consist in display data about football teams and football players of the spanish league, english league and champions league.
https://github.com/martinwebdev95/thefootballhub

frontend nextjs14 reactjs tailwindcss vercel-deployment

Last synced: about 1 month ago
JSON representation

Project that consist in display data about football teams and football players of the spanish league, english league and champions league.

• Host: GitHub
• URL: https://github.com/martinwebdev95/thefootballhub
• Owner: MartinWebDev95
• Created: 2024-05-14T08:59:36.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-08-28T11:55:28.000Z (4 months ago)
• Last Synced: 2024-08-29T09:37:51.835Z (4 months ago)
• Topics: frontend, nextjs14, reactjs, tailwindcss, vercel-deployment
• Language: JavaScript
• Homepage: https://the-football-hub.vercel.app
• Size: 1.63 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.en.md

Awesome Lists containing this project

README

        
[Button Language]: https://img.shields.io/badge/Leer%20En%20Español-000000?style=for-the-badge

[![Button Language]](https://github.com/MartinWebDev95/TheFootballHub/blob/main/README.md)

# The Football Hub                                

---

[The Football Hub]: https://img.shields.io/badge/The%20Football%20Hub-005C0B?style=for-the-badge

Project that consist in display data about football teams and football players of the spanish league, english league and champions league.

[![The Football Hub]](https://the-football-hub.vercel.app/)

## 👨🏽‍💻 What technologies have I used?

---

[Button Vercel]: https://img.shields.io/badge/Deploy%20on%20Vercel-000000?style=for-the-badge&logo=vercel

[Button Next]: https://img.shields.io/badge/Next-000000?style=for-the-badge&logoColor=ffff&logo=next.js

[Button Tailwind]: https://img.shields.io/badge/Tailwind%20CSS-000000?style=for-the-badge&logo=tailwindcss

[![Button Next]](https://nextjs.org/)

[![Button Tailwind]](https://tailwindcss.com/docs/installation)

[![Button Vercel]](https://vercel.com/)

- **Next JS:** I have used Next.js that is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations. Under the hood, Next.js also abstracts and automatically configures tooling needed for React, like bundling, compiling, and more. This allows you to focus on building your application instead of spending time with configuration. Whether you're an individual developer or part of a larger team, Next.js can help you build interactive, dynamic, and fast React applications.

- **Tailwind CSS:** I have used TailwindCSS to style the different components.

- **API:** I have used the [API-Football](https://www.api-football.com/documentation-v3) API to get all the information about teams, leagues and players.

## 📸 Some Screenshots!

---

![Home Page Screenshot](https://github.com/MartinWebDev95/TheFootballHub/blob/main/public/assets/screenshots/homePage.png)

![Standing Page Screenshot](https://github.com/MartinWebDev95/TheFootballHub/blob/main/public/assets/screenshots/standingPage.png)

![Results Page Screenshot](https://github.com/MartinWebDev95/TheFootballHub/blob/main/public/assets/screenshots/resultsPage.png)

![Upcoming Matches Screenshot](https://github.com/MartinWebDev95/TheFootballHub/blob/main/public/assets/screenshots/upcomingMatchesPage.png)

![Top Scorers Page Screenshot](https://github.com/MartinWebDev95/TheFootballHub/blob/main/public/assets/screenshots/topScorersPage.png)

## 🗃️ Project Structure

---

This is the structure that I have used in this project:

```

/

├── public/

│   └── assets/          

│       └── image.jpg

│

├── src/

│   ├── app/

│   │    ├── folder/

│   │    │    └── [folder]/

│   │    │        └── folder/

│   │    │            └── page.jsx

│   │    ├── globals.css

│   │    ├── layout.jsx

│   │    └── page.jsx

│   ├── components/

│   │   └── Component.jsx

│   ├── hooks/

│   │   └── useHook.js

│   ├── lib/

│   │   └── getData.js   

│   └── utils/

│       └── util.js 

└── package.json

```

## 👀 Where you can find me?

---

[Button Portfolio]: https://img.shields.io/badge/Visit%20my%20Portfolio-000000?style=for-the-badge

[![Button Portfolio]](https://portfolio-martinwebdev95.vercel.app/)