A very simple "Game CRUD" for your backlogged games.
These are the versions of the technologies used in this project:
| Tech | Version |
|---|---|
| Node.js | 18 |
| React.js | 18 |
| Next.js | 12 |
So you want to store games, right? Just click this repo's website and you can start! Better yet, click here!
This app is hosted by GitHub pages.
The only purpose of this project was to practice clean architecture with Next.js and React.js.
At the momento, the project persists data with LocalStorage.
However, if you want to use PocketBase as this project was intended before...
- Clone this repo.
- Install and start running PocketBase. Click here for more info!
- Import the data schemas from
pb_schema.json. This file contains the only collection defined on this app: games. - Go to
gameCollectionController.tsxfile, and toggle the commented code between PocketBase and LocalStorage implementation.
// * This is a implementation for PocketBase
import { GameCollectionPB } from "../data/gameCollectionPB";
const gameCollectionRepo = new GameCollectionPB();
// * This is a implementation for LocalStorage
// import { GameCollectionLS } from "../data/gameCollectionLS";
// const gameCollectionRepo = new GameCollectionLS();- Create the
.env.localfile. You can copy it from the given template.env.local.template, replacingSERVER_URLwith your PB's server.
# Here goes you PocketBase server url
NEXT_PUBLIC_PB_REST_API=SERVER_URL- Init and run the project. You can run it directly from
dev, or firstbuilding it and thenstarting it.
npm i
npm run devYou can find the project structure in these files: tree-en.txt for English, and tree-es.txt for Spanish.
This project uses GitHub Actions for build and deployment. You can find the workflow in .github/workflows/nextjs.yml, which was based on this example: https://github.com/actions/starter-workflows/blob/main/pages/nextjs.yml.
I made this project with Next.js 12. However, the implementation doesn't actually use most of this framework's features. That's why I consider this as a "React.js project" instead.
It's very possible that there are many and better implementations out there on the internet, so you should check them out!
On the whole, this app is a combination of a bunch of ideas and implementations using clean architecture.