https://github.com/ucangun/workshop_w-reactrouter
Clarusway Web Page with React Router is a multi-page React application using react-router. As team lead, I prepared and presented the project, focusing on improving skills in HTML, CSS, JS, and React.
https://github.com/ucangun/workshop_w-reactrouter
Last synced: about 2 months ago
JSON representation
Clarusway Web Page with React Router is a multi-page React application using react-router. As team lead, I prepared and presented the project, focusing on improving skills in HTML, CSS, JS, and React.
- Host: GitHub
- URL: https://github.com/ucangun/workshop_w-reactrouter
- Owner: ucangun
- Created: 2024-07-23T10:57:23.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-07-23T13:42:11.000Z (10 months ago)
- Last Synced: 2025-02-10T08:15:22.196Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 7.5 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
Clarusway
# Project-006 : Clarusway Web Page with React Router
## Description
Project aims to create a Clarusway Web Page with Router.
## Problem Statement
- We are adding a new project to our portfolios. So you and your colleagues have started to work on the project.
## Project Skeleton
```
003 - Clarusway Web Page with Router (folder)
|
|----readme.md # Given to the students (Definition of the project)
SOLUTION
├── public
│ └── index.html
├── src
│ ├── assets.js
│ │ └── images
│ ├── components
│ │ ├── Footer.js
│ │ ├── Card.js
│ │ └── Navbar.js
│ ├── pages
│ │ ├── Home.js
│ │ ├── About.js
│ │ ├── Services.js
│ │ ├── Html.js
│ │ ├── Css.js
│ │ └── Logo.js
│ ├── router
│ │ └── AppRouter.js│
│ ├── App.js
│ ├── App.css
│ ├── index.js
│ └── index.css
├── package.json
└── yarn.lock
```
## Expected Outcome
## Objective
Build a Clarusway Web Page using ReactJS and react-router.
### At the end of the project, following topics are to be covered;
- HTML
- CSS
- JS
- ReactJS
### At the end of the project, students will be able to;
- Improve coding skills within HTML & CSS & JS & ReactJS.
- Use git commands (push, pull, commit, add etc.) and Github as Version Control System.
## Steps to Solution
- Step 1: Create React App using `yarn create react-app clarusway-web-page-with-router` or `npx create-react-app clarusway-web-page-with-router`.
- Step 2: Build Clarusway Web Page using ReactJS, react-router.
- Step 3: Push your application into your own public repo on Github.
- Step 4: Add project gif to your project and README.md file.
## Notes
- You can add additional functionalities and design to your app.
[starter folder](./starter/)
**
☺ Happy Coding ✍
**