Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/apfirebolt/react-games-database
A UI application in React which shows games sell related data from an API
https://github.com/apfirebolt/react-games-database
api-integration axios games-api material-ui react reactjs vercel vercel-deployment
Last synced: 18 days ago
JSON representation
A UI application in React which shows games sell related data from an API
- Host: GitHub
- URL: https://github.com/apfirebolt/react-games-database
- Owner: Apfirebolt
- License: other
- Created: 2024-12-30T17:36:24.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-01-13T22:32:29.000Z (29 days ago)
- Last Synced: 2025-01-21T00:44:09.757Z (22 days ago)
- Topics: api-integration, axios, games-api, material-ui, react, reactjs, vercel, vercel-deployment
- Language: JavaScript
- Homepage: https://react-games-database.vercel.app
- Size: 453 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Database Application for Games
## Introduction
This project is a simple React application that serves as a database for games. It allows users to view game entries from the API https://softgenie.org/api/games. The application is built using Vite for fast development and optimized build processes. It uses Material UI for beautiful styled components following Material design patterns.
The project is deployed here https://react-games-database.vercel.app for the time being.
## Features
- View a list of games
- Material UI is used for UI components
- Responsive design for mobile and desktop
## Technologies Used
- **React**: A JavaScript library for building user interfaces
- **Vite**: A build tool that provides a fast development environment
- **Material UI**: For styling components
- **Axios**: For making HTTP requests to a backend API
## Prerequisites
Before you begin, ensure you have met the following requirements:
- You have installed Node.js and npm.
- You have a basic understanding of JavaScript and React.
## Installation
To install the project, follow these steps:
1. Clone the repository:
```sh
git clone https://github.com/your-username/react_games_database.git
cd react_games_database
```
2. Install the dependencies:
```sh
npm install
```
3. Start the development server:
```sh
npm run dev
```
## Usage
To use the application, follow these steps:
1. Open your browser and navigate to `http://localhost:3000`.
2. Browse the list of games.
## Screenshots
This is the games list page
Screenshot of the image modal
## Project Structure
After creating the project, your directory structure should look like this:
```
react_games_database/
├── node_modules/
│ ├── screenshots/
├── public/
│ ├── favicon.ico
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
| ├── screens/
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js
```
## Available Scripts
In the project directory, you can run:
- `npm run dev`: Starts the development server.
- `npm run build`: Bundles the app into static files for production.
- `npm run preview`: Serves the production build locally.
## Contributing
Contributions are always welcome! Please follow these steps to contribute:
1. Fork the repository.
2. Create a new branch (`git checkout -b feature/your-feature`).
3. Make your changes.
4. Commit your changes (`git commit -m 'Add some feature'`).
5. Push to the branch (`git push origin feature/your-feature`).
6. Open a pull request.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.
## Learn More
To learn more about Vite and React, check out the following resources:
- [Vite Documentation](https://vitejs.dev/guide/)
- [React Documentation](https://reactjs.org/)