Skip to content

Commit eb095cb

Browse files
ShaikAdhilShaikAdhil
committed
Routing Practice App
0 parents  commit eb095cb

30 files changed

+14283
-0
lines changed

‎.eslintignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
coverage
3+
build

‎.eslintrc

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es2021": true
5+
},
6+
"parser": "babel-eslint",
7+
"extends": ["react-app", "airbnb", "prettier"],
8+
"parserOptions": {
9+
"ecmaFeatures": {
10+
"jsx": true
11+
},
12+
"ecmaVersion": 12,
13+
"sourceType": "module"
14+
},
15+
"plugins": ["prettier"],
16+
"overrides": [
17+
{
18+
"files": ["styledComponents.js"],
19+
"rules": {
20+
"import/prefer-default-export": "off"
21+
}
22+
}
23+
],
24+
"rules": {
25+
"prettier/prettier": "error",
26+
"react/jsx-filename-extension": [1, {"extensions": [".js", ".jsx"]}],
27+
"react/state-in-constructor": "off",
28+
"react/react-in-jsx-scope": "off",
29+
"react/jsx-uses-react": "off",
30+
"no-console": "off",
31+
"react/prop-types": "off",
32+
"jsx-a11y/label-has-associated-control": [
33+
2,
34+
{
35+
"labelAttributes": ["htmlFor"]
36+
}
37+
],
38+
"jsx-a11y/click-events-have-key-events": 0,
39+
"jsx-a11y/no-noninteractive-element-interactions": [
40+
"off",
41+
{
42+
"handlers": ["onClick"]
43+
}
44+
],
45+
"react/prefer-stateless-function": [
46+
0,
47+
{
48+
"ignorePureComponents": true
49+
}
50+
],
51+
"no-unused-vars": "warn",
52+
"jsx-a11y/alt-text": 1,
53+
"react/no-unused-state": "warn",
54+
"react/button-has-type": "warn",
55+
"react/no-unescaped-entities": "warn",
56+
"react/jsx-props-no-spreading": "off",
57+
"operator-assignment": ["warn", "always"],
58+
"radix": "off"
59+
}
60+
}

‎.gitattributes

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto eol=lf

‎.gitignore

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# dependencies
2+
/node_modules
3+
/.pnp
4+
.pnp.js
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/build
11+
12+
# misc
13+
.DS_Store
14+
.env.local
15+
.env.development.local
16+
.env.test.local
17+
.env.production.local
18+
19+
npm-debug.log*
20+
yarn-debug.log*
21+
yarn-error.log*
22+
23+
.idea/
24+
.eslintcache
25+
.vscode/
26+
.results

‎.npmrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
registry=https://registry.npmjs.org/
2+
package-lock=true
3+
save-exact=true

‎.prettierignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
coverage
3+
build

‎.prettierrc

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"arrowParens": "avoid",
3+
"bracketSpacing": false,
4+
"endOfLine": "lf",
5+
"htmlWhitespaceSensitivity": "css",
6+
"insertPragma": false,
7+
"jsxBracketSameLine": false,
8+
"jsxSingleQuote": false,
9+
"printWidth": 80,
10+
"overrides": [
11+
{
12+
"files": "*.md",
13+
"options": {
14+
"printWidth": 1000
15+
}
16+
}
17+
],
18+
"proseWrap": "always",
19+
"quoteProps": "as-needed",
20+
"requirePragma": false,
21+
"semi": false,
22+
"singleQuote": true,
23+
"tabWidth": 2,
24+
"trailingComma": "all",
25+
"useTabs": false
26+
}

‎README.md

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
In this project, let's build a **Routing Practice** app by applying the concepts we have learned till now.
2+
3+
### Refer to the image below:
4+
5+
<br/>
6+
<div style="text-align: center;">
7+
<img src="https://assets.ccbp.in/frontend/content/react-js/routing-practice-output.gif" alt="routing-practice-desktop-output" style="max-width:70%;box-shadow:0 2.8px 2.2px rgba(0, 0, 0, 0.12)">
8+
</div>
9+
<br/>
10+
11+
### Design Files
12+
13+
<details>
14+
<summary>Click to view</summary>
15+
16+
- [Extra Small (Size < 576px), Small (Size >= 576px), Medium (Size >= 768px)](https://assets.ccbp.in/frontend/content/react-js/routing-practice-sm-output.png)
17+
- [Large (Size >= 992px) and Extra Large (Size >= 1200px)](https://assets.ccbp.in/frontend/content/react-js/routing-practice-lg-output.png)
18+
19+
</details>
20+
21+
### Set Up Instructions
22+
23+
<details>
24+
<summary>Click to view</summary>
25+
26+
- Download dependencies by running `npm install`
27+
- Start up the app using `npm start`
28+
</details>
29+
30+
### Completion Instructions
31+
32+
<details>
33+
<summary>Functionality to be added</summary>
34+
<br/>
35+
36+
The app must have the following functionalities
37+
38+
- When the **About** link in the header is clicked, then the page should navigate to the `AboutRoute`
39+
- When the **Contact** link in the header is clicked, then the page should navigate to the `ContactRoute`
40+
- When the **Home** link in the header is clicked, then the page should navigate back to the `HomeRoute`
41+
- When an undefined path is provided in the URL, then the page should navigate to the `NotFoundRoute`
42+
43+
</details>
44+
45+
<details>
46+
<summary>Components Structure</summary>
47+
48+
<br/>
49+
<div style="text-align: center;">
50+
<img src="https://assets.ccbp.in/frontend/content/react-js/routing-practice-home-about-component-breakdown-structure.png" alt="" style="max-width:100%;box-shadow:0 2.8px 2.2px rgba(0, 0, 0, 0.12)">
51+
</div>
52+
<br/>
53+
<div style="text-align: center;">
54+
<img src="https://assets.ccbp.in/frontend/content/react-js/routing-practice-contact-not-found-component-breakdown-structure.png" alt="" style="max-width:100%;box-shadow:0 2.8px 2.2px rgba(0, 0, 0, 0.12)">
55+
</div>
56+
</details>
57+
58+
<details>
59+
<summary>Implementation Files</summary>
60+
<br/>
61+
62+
Use these files to complete the implementation:
63+
64+
- `src/components/App.js`
65+
- `src/components/App.css`
66+
- `src/components/Header/index.js`
67+
- `src/components/Header/index.css`
68+
- `src/components/Home/index.js`
69+
- `src/components/Home/index.css`
70+
- `src/components/About/index.js`
71+
- `src/components/About/index.css`
72+
- `src/components/Contact/index.js`
73+
- `src/components/Contact/index.css`
74+
- `src/components/NotFound/index.js`
75+
- `src/components/NotFound/index.css`
76+
</details>
77+
78+
### Important Note
79+
80+
<details>
81+
<summary>Click to view</summary>
82+
83+
<br/>
84+
85+
**The following instructions are required for the tests to pass**
86+
87+
- `HomeRoute` should consist of "/" in the URL path
88+
- `AboutRoute` should consist of "/about" in the URL path
89+
- `ContactRoute` should consist of "/contact" in the URL path
90+
- No need to use the `BrowserRouter` in `App.js` as we have already included in `index.js` file
91+
92+
</details>
93+
94+
### Resources
95+
96+
<details>
97+
<summary>Image URLs</summary>
98+
99+
- [https://assets.ccbp.in/frontend/react-js/wave-logo-img.png](https://assets.ccbp.in/frontend/react-js/wave-logo-img.png) alt should be **wave**
100+
- [https://assets.ccbp.in/frontend/react-js/home-blog-img.png](https://assets.ccbp.in/frontend/react-js/home-blog-img.png) alt should be **home**
101+
- [https://assets.ccbp.in/frontend/react-js/about-blog-img.png](https://assets.ccbp.in/frontend/react-js/about-blog-img.png) alt should be **about**
102+
- [https://assets.ccbp.in/frontend/react-js/contact-blog-img.png](https://assets.ccbp.in/frontend/react-js/contact-blog-img.png) alt should be **contact**
103+
- [https://assets.ccbp.in/frontend/react-js/not-found-blog-img.png](https://assets.ccbp.in/frontend/react-js/not-found-blog-img.png) alt should be **not found**
104+
105+
</details>
106+
107+
<details>
108+
<summary>Colors</summary>
109+
110+
<br/>
111+
112+
<div style="background-color: #6d396b; width: 150px; padding: 10px; color: white">Hex: #6d396b</div>
113+
<div style="background-color: #555555; width: 150px; padding: 10px; color: white">Hex: #555555</div>
114+
<div style="background-color: #551e53; width: 150px; padding: 10px; color: white">Hex: #551e53</div>
115+
<div style="background-color: #12022f; width: 150px; padding: 10px; color: white">Hex: #12022f</div>
116+
117+
</details>
118+
119+
<details>
120+
<summary>Font-families</summary>
121+
122+
- Roboto
123+
124+
</details>
125+
126+
> ### _Things to Keep in Mind_
127+
>
128+
> - All components you implement should go in the `src/components` directory.
129+
> - Don't change the component folder names as those are the files being imported into the tests.
130+
> - **Do not remove the pre-filled code**
131+
> - Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.

‎package.json

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
{
2+
"name": "routing-practice",
3+
"private": true,
4+
"version": "1.0.0",
5+
"engines": {
6+
"node": "^10.13 || 12 || 14 || 15",
7+
"npm": ">=6"
8+
},
9+
"dependencies": {
10+
"@testing-library/jest-dom": "5.11.9",
11+
"@testing-library/react": "11.2.5",
12+
"@testing-library/user-event": "12.6.2",
13+
"chalk": "4.1.0",
14+
"history": "5.0.0",
15+
"react": "17.0.1",
16+
"react-dom": "17.0.1",
17+
"react-router-dom": "5.2.0"
18+
},
19+
"devDependencies": {
20+
"eslint-config-airbnb": "18.2.1",
21+
"eslint-config-prettier": "8.1.0",
22+
"eslint-plugin-prettier": "3.3.1",
23+
"husky": "4.3.8",
24+
"lint-staged": "10.5.4",
25+
"npm-run-all": "4.1.5",
26+
"prettier": "2.2.1",
27+
"react-scripts": "4.0.3"
28+
},
29+
"scripts": {
30+
"start": "react-scripts start",
31+
"build": "react-scripts build",
32+
"test": "react-scripts test",
33+
"lint": "eslint .",
34+
"lint:fix": "eslint --fix src/",
35+
"format": "prettier --write \"./src\"",
36+
"run-all": "npm-run-all --parallel test lint:fix"
37+
},
38+
"lint-staged": {
39+
"*.js": [
40+
"npm run lint:fix"
41+
],
42+
"*.{js, jsx, json, html, css}": [
43+
"npm run format"
44+
]
45+
},
46+
"husky": {
47+
"hooks": {
48+
"pre-commit": "lint-staged"
49+
}
50+
},
51+
"jest": {
52+
"collectCoverageFrom": [
53+
"src/**/*.js"
54+
]
55+
},
56+
"browserslist": {
57+
"development": [
58+
"last 2 chrome versions",
59+
"last 2 firefox versions",
60+
"last 2 edge versions"
61+
],
62+
"production": [
63+
">1%",
64+
"last 4 versions",
65+
"Firefox ESR",
66+
"not ie < 11"
67+
]
68+
}
69+
}

0 commit comments

Comments
 (0)