An application showcasing cricket players' biographies and career statistics. This project demonstrates the use of the Backend for Frontend (BFF) design pattern in a real-world application.
✔️ List Countries and Players
✔️ Select a Country and Player
✔️ Search a Country and Player
✔️ Display Player's Statistics based on the selections
This application is a turborepo comprised of two apps and various packages that are shared across both apps. This is how the scaffolding looks:
In the project, there's an apps
folder which contains two applications:
- api
- client
api
This app is an Express.js project with a basic setup that exposes several APIs. The following is the list of endpoints:
/countries
/players
/players/:id
/players/:id/career
These endpoints return information about all the countries in the world and the players in each country. This data is fetched through a public API sportsmonks
client This app was built in NextJs 14. It has two main parts
- Frontend Part
- Server Part
In the Frontend we have all the components as usual which takes care of the UI. In the Server, we have implemented a Backend for Frontend (BFF) logic.
This is how our server (BFF) is handling Frontend requests.
In the project, there's a packages
folder which have five packages i.e.
- config-eslint
- config-tailwind
- config-typescript
- jest-presets
- logger
- types
config-eslint. config-tailwind, config-typescript, and jest-presets are libraries that are used across both apps or meant to be in future.
logger is a custom package which wrapps around console.log to supress eslint warnings and keep the logs of applications.
Note that logger has two functions i.e.
logClient
andlogAPI
types is custom package which contains types that are shared across the apps.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
You'll need Git, Node.js, and pnpm installed on your computer with the following versions:
node@v20.10.0 or higher
pnpm@9.0.1 or higher
git@2.39.3 or higher
From your command line, clone and run cricket-player-app
:
# Clone this repository
git clone https://github.com/asadkhalid305/cricket-player-app
# Go into the repository
cd cricket-player-app
# Setup default environment variables
# For Linux
cp .env.example .env
# For Windows
copy .env.example .env
# Install dependencies
pnpm install
# Start a local development server
# This command will start both of your applications
pnpm dev
# Start client app only
pnpm dev:client
# Start api app only
pnpm dev:api
If you'd like to make this app better for other users, create issues to improve this project. Or if you have created something awesome for your fork and want to share it, feel free to open a pull request.