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.
- View a list of games
- Material UI is used for UI components
- Responsive design for mobile and desktop
- 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
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.
To install the project, follow these steps:
-
Clone the repository:
git clone https://github.com/your-username/react_games_database.git cd react_games_database
-
Install the dependencies:
npm install
-
Start the development server:
npm run dev
To use the application, follow these steps:
- Open your browser and navigate to
http://localhost:3000
. - Browse the list of games.
This is the games list page
Screenshot of the image modal
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
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.
Contributions are always welcome! Please follow these steps to contribute:
- Fork the repository.
- Create a new branch (
git checkout -b feature/your-feature
). - Make your changes.
- Commit your changes (
git commit -m 'Add some feature'
). - Push to the branch (
git push origin feature/your-feature
). - Open a pull request.
This project is licensed under the MIT License. See the LICENSE file for more information.
To learn more about Vite and React, check out the following resources: