https://github.com/abayomi1196/anime-webpage
Web app showing top, trending animes, allowing users to search and view in detail.
https://github.com/abayomi1196/anime-webpage
css-modules graphql nextjs
Last synced: 2 months ago
JSON representation
Web app showing top, trending animes, allowing users to search and view in detail.
- Host: GitHub
- URL: https://github.com/abayomi1196/anime-webpage
- Owner: abayomi1196
- Created: 2021-11-18T07:08:44.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-11-28T11:17:20.000Z (over 4 years ago)
- Last Synced: 2025-04-06T22:38:52.015Z (about 1 year ago)
- Topics: css-modules, graphql, nextjs
- Language: JavaScript
- Homepage: https://anime-webpage.vercel.app/
- Size: 563 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This project was created with [NextJS](https://nextjs.org/docs/getting-started), [CSS Modules](https://github.com/css-modules/css-modules) & the [Anime List Graphql API](https://studio.apollographql.com/graph/My-Graph-mrsvd/explorer?variant=current).
## Getting Started
First, install node_modules and then run the development server:
```bash
npm install
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
#### Project Architecture
```
┣ components
┣ context
┣ graphql
┣ pages
┣ public
┣ styles
┗ utils
```
The description of each folder in the project architecture is given below:
- `components`: contains stateful reusable components. Each component has a root folder (kebab-cased) which houses the component file and the other associated files (PascalCased). For example, the structure for a `Card` component would be:
```
card
┣ Card.js
┗ Card.module.css
```
- `context`: contains some application state, which was setup with the React `createContext` hook, allows sharing of data between components without unneccesary prop drilling and eliminates the need for external state management libraries.
- `graphql`: contain graphql queries, may also house mutations in future iterations.
- `pages`: Contain functional top level components that are responsible for generating the view for any given route, a sample structure would look like:
```
pages
┣ anime
┃ ┗ [id].js - dynamic page where details are statically generated
┣ _app.js
┗ index.js
```
- `public`: Contains static assets i.e images.
- `styles`: Contain global and page level styles defined using `CSS Modules`
- `utils`: Contains reusable functions.