Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/walidbosso/react_projects

Here where I store my pure React projects, three projects so far, first there's a full E-Commerce application using a JSON server, before that a Connect-4 game, and finally a Basic calculator.
https://github.com/walidbosso/react_projects

calculator calculator-javascript connect-4 connect-four css e-commerce hooks javascript jsonserver jsx nodejs props reactjs

Last synced: about 2 months ago
JSON representation

Here where I store my pure React projects, three projects so far, first there's a full E-Commerce application using a JSON server, before that a Connect-4 game, and finally a Basic calculator.

Host: GitHub
URL: https://github.com/walidbosso/react_projects
Owner: walidbosso
License: mit
Created: 2023-09-26T05:20:36.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-01-06T19:33:20.000Z (about 1 year ago)
Last Synced: 2024-01-06T20:42:17.245Z (about 1 year ago)
Topics: calculator, calculator-javascript, connect-4, connect-four, css, e-commerce, hooks, javascript, jsonserver, jsx, nodejs, props, reactjs
Language: JavaScript
Homepage:
Size: 896 KB
Stars: 5
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md

Awesome Lists containing this project

README

![React_Projects](https://socialify.git.ci/walidbosso/React_Projects/image?description=1&font=Source%20Code%20Pro&forks=1&issues=1&language=1&name=1&owner=1&pattern=Formal%20Invitation&pulls=1&stargazers=1&theme=Auto)

[![GitHub WidgetBox](https://github-widgetbox.vercel.app/api/profile?username=walidbosso&data=followers,repositories,stars,commits&theme=nautilus)](https://github.com/walidbosso/React_Projects)

# React Projects Repository

Welcome to my repository where I store pure React projects. This repository contains three projects:

1. **E-Commerce Application with JSON Server**
2. **Connect-4 Game**
3. **Basic Calculator**

Feel free to explore each project and use them as a reference for your own projects.

## Projects

### 1. E-Commerce Application with JSON Server

A full-fledged E-Commerce application built using React and powered by a JSON server. This project demonstrates how to create a dynamic online store with product listings, a shopping cart, and a simple checkout process.

#### Technologies Used:
- ReactJS
- JSON Server
- CSS

#### How to Run:
1. Fork & Clone the repository.
2. Navigate to the `E-Commerce` directory.
3. Install dependencies: `npm install`.
4. Install JSON Server `npm install -g json-server`
5. Navigate to db/db.json. Start the JSON server: `json-server --watch db.json`.
6. Start the React app: `npm start`.

### 2. Connect-4 Game

A classic Connect-4 game implemented in React. This project showcases the use of React hooks and state management to create an interactive gaming experience.

#### Technologies Used:
- ReactJS
- CSS
- Hooks

#### How to Run:
1. Fork & Clone the repository.
2. Navigate to the `Connect-4` directory.
3. Install dependencies: `npm install`.
4. Start the React app: `npm start`.

### 3. Basic Calculator

A simple calculator built using React. This project is an excellent example of using React state and props for building interactive user interfaces.

#### Technologies Used:
- ReactJS
- CSS
- JavaScript (Calculator logic)

#### How to Run:
1. Fork & Clone the repository.
2. Navigate to the `basic-calculator` directory.
3. Install dependencies: `npm install`.
4. Start the React app: `npm start`.

## Topics

- Node.js
- JavaScript
- CSS
- ReactJS
- React Hooks
- Props
- JSON Server
- E-Commerce
- Calculator
- Connect-4

Feel free to explore the projects and use the code as a reference for your own projects. If you have any questions or suggestions, feel free to reach out!

Happy coding!

👏 Thanks for the support

## Stargazers

[![Stargazers repo roster for @walidbosso/React_Projects](http://reporoster.com/stars/dark/walidbosso/React_Projects)](https://github.com/walidbosso/React_Projects/stargazers)

## Forkers

[![Forkers repo roster for @walidbosso/React_Projects](http://reporoster.com/forks/dark/walidbosso/React_Projects)](https://github.com/walidbosso/React_Projects/network/members)

## Contributors

![GitHub last commit (by committer)](https://img.shields.io/github/last-commit/walidbosso/React_Projects?style=social)

![GitHub License](https://img.shields.io/github/license/walidbosso/React_Projects?style=social)

𝚂𝚑𝚘𝚠 𝚜𝚘𝚖𝚎 💙 𝚋𝚢 𝚜𝚝𝚊𝚛𝚛𝚒𝚗𝚐 ⭐ 𝚝𝚑𝚎 𝚛𝚎𝚙𝚘𝚜𝚒𝚝𝚘𝚛𝚢!