├── .env.development ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── custom.md │ ├── feature_request.md │ └── general-issue-template.md └── pull_request_template.md ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENCE ├── README.md ├── cypress.json ├── cypress ├── fixtures │ └── example.json ├── integration │ └── essential │ │ ├── about.spec.js │ │ └── home.spec.js ├── plugins │ └── index.js └── support │ ├── commands.js │ └── index.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.js ├── App.test.js ├── Components ├── Footer │ └── footer.js ├── Header │ ├── header.js │ └── header.scss └── NavMenu │ ├── navMenu.css │ └── navMenu.js ├── Context └── ctx.js ├── Helpers └── helpers.js ├── Images └── logo-react.png ├── Layouts ├── DefaultLayout │ ├── defaultLayout.js │ └── defaultLayout.scss └── PagesLayout │ └── PagesLayout.js ├── index.css ├── index.js ├── pages ├── About │ ├── about.js │ └── about.scss ├── Home │ ├── home.js │ └── home.scss └── NotFound │ ├── notFound.js │ └── notFound.scss └── reportWebVitals.js /.env.development: -------------------------------------------------------------------------------- 1 | # (CAUTION) Do not store any secrets here. 2 | # https://create-react-app.dev/docs/adding-custom-environment-variables/ 3 | # Consider requesting sensitive data using a backend server (ex. express ). 4 | 5 | REACT_APP_API_ADDRESS="https://jsonplaceholder.typicode.com" 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/general-issue-template.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: General issue template 3 | about: Use this template for any type of issue that is not related to a bug or feature 4 | request. 5 | title: '' 6 | labels: '' 7 | assignees: '' 8 | 9 | --- 10 | 11 | 12 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | #### Reference Issues/PRs: 2 | 3 | #### What does this implement/fix? Explain your changes: 4 | 5 | #### Comments/mentions: 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | emanuelfaisca@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | - When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change. 4 | 5 | - Checkout this amazing step by step [guide](https://www.dataschool.io/how-to-contribute-on-github/) to open source contributions. This should help you get started. 6 | - Using the conventions for the pull requests used on the guide would be ideal. 7 | 8 | Initially you can propose changes using the following format: 9 | ```diff 10 | + proposed changes 11 | - original 12 | ``` 13 | You can learn this markdown syntax [here](https://stackoverflow.com/questions/40883421/diff-syntax-highlighting-in-github-markdown) 14 | 15 | Once we agree on the changes you can then make a pull request. 16 | You will need to Fork this project then make the changes on your forked repo then create the pull request. 17 | 18 | Additionally here are some more useful content on how to work with git to make contributions: 19 | 20 | - [https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) 21 | - [https://youtu.be/yzeVMecydCE](https://youtu.be/yzeVMecydCE) 22 | - [https://gist.github.com/Chaser324/ce0505fbed06b947d962](https://gist.github.com/Chaser324/ce0505fbed06b947d962) 23 | Let me know if you need any further help. 👍✌ 24 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 emanuel-dev 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Website](https://img.shields.io/website?down_color=gray&down_message=dead&up_color=green&up_message=online&url=https%3A%2F%2Femanuelgf.github.io%2Ftemplate-react-ui%2F%23%2F) 2 | 3 | # Quickstart React template for website projects 4 | 5 | > Lots of common website project features added on top of create-react-app to save you time. 6 | > It´s intended to provide a simple quickstart configuration on top of create-react-app so to get you over the common project setup that is normally implemented on most projects. 7 | > Use it for all your needs. Make some contributions, We are beginner friendly ✌👍 (Do Reach out to me if you need further explanation on the project structure.) 8 | 9 | ## Preview 10 | 11 | ![preview about](https://api.emanuel-dev.com/uploads/preview2_9936057288.png) 12 | =============================== 13 | ![preview home](https://api.emanuel-dev.com/uploads/preview1_10cb02892b.png) 14 | 15 | ## Deployment 16 | You can check out the deployed template on this [Link](https://emanuelgf.github.io/template-react-ui) 🚀 17 | 18 | ## Added features: 19 | * Folder structure 20 | * React context 21 | * Routing 22 | * reseted css 23 | * basic cookie consent 24 | * Layout ready 25 | * react-bootstrap 26 | * Icons with fontawesome-free 27 | * sass ready 28 | * Standard "404 - page not found" for broken or dead link. 29 | * End to end testing with [Cypress.io](https://www.cypress.io/) 30 | 31 | ## Modules: 32 | * axios 33 | * react-router-dom 34 | * react-lazy-load-images 35 | * react-markdown 36 | * react-cookie-consent 37 | * react-bootstrap bootstrap 38 | * @fortawesome/fontawesome-free 39 | * node-sass 40 | * cypress 41 | 42 | ### Folder Structure 43 | Folder structure on root directory: 44 | 45 | ``` 46 | . 47 | +-- _cypress 48 | | +-- _integration 49 | | +-- sometest.spec.js 50 | +-- _src 51 | | +-- _Components 52 | | +-- _ComponentA 53 | | +-- componenta.js 54 | | +-- componenta.scss 55 | | +-- _Context 56 | | +-- ctx.js 57 | | +-- _Helpers 58 | | +-- helpers.js 59 | | +-- _Images 60 | | +-- img1.jpg 61 | | +-- img2.jpg 62 | | +-- _Layouts 63 | | +-- _Layout1 64 | | +-- Layout1.js 65 | | +-- _Layout2 66 | | +-- Layout2.js 67 | +-- _pages 68 | | +-- _SomePage 69 | | +-- SomePage.js 70 | | +-- SomePage.scss 71 | 72 | ``` 73 | 74 | ### React context 75 | - Used to pass data common to all componentes. 76 | ex: change the theme, language translation. 77 | 78 | ### Some other things to keep in mind: 79 | - You can use react-lazy-load-image-component to lazy load images and add effects. 80 | - Cookie consent ready with react-cookie-consent. 81 | - The project is fetching dummy data from [jsonplaceholder.typicode](https://jsonplaceholder.typicode.com) 82 | 83 | ## Using this template 84 | 1. Fork it! 85 | 2. Clone your fork to your local machine. 86 | 3. npm install the dependencies `` 87 | 4. Run the project `` 88 | *** 89 | 90 | - This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 91 | 92 | ## Available Scripts 93 | 94 | In the project directory, you can run: 95 | 96 | ### `npm start` 97 | 98 | Runs the app in the development mode.\ 99 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 100 | 101 | The page will reload if you make edits.\ 102 | You will also see any lint errors in the console. 103 | 104 | ### `npm run build` 105 | 106 | Builds the app for production to the `build` folder.\ 107 | It correctly bundles React in production mode and optimizes the build for the best performance. 108 | 109 | The build is minified and the filenames include the hashes.\ 110 | Your app is ready to be deployed! 111 | 112 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 113 | 114 | ### `npm run test` 115 | 116 | Runs the tests which have been written in the cypress folder.\ 117 | Cypress automatically opens an interactive interface in your browser\ 118 | where you can get more details about the test that are currently running. 119 | 120 | The tests will rerun when changes are made to test files 121 | 122 | *** 123 | 124 | ## Learn More 125 | 126 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 127 | 128 | To learn React, check out the [React documentation](https://reactjs.org/). 129 | 130 | ### Code Splitting 131 | 132 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 133 | 134 | ### Analyzing the Bundle Size 135 | 136 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 137 | 138 | ### Making a Progressive Web App 139 | 140 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 141 | 142 | ### Advanced Configuration 143 | 144 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 145 | 146 | ### Deployment 147 | 148 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 149 | 150 | ### `npm run build` fails to minify 151 | 152 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 153 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "baseUrl": "http://localhost:3000", 3 | "env": { 4 | "viewports": ["ipad-2", "iphone-6", "macbook-11"], 5 | "orientations": ["portrait", "landscape"] 6 | } 7 | 8 | } 9 | -------------------------------------------------------------------------------- /cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /cypress/integration/essential/about.spec.js: -------------------------------------------------------------------------------- 1 | //Env variables on cypress.json 2 | const orientations = Cypress.env('orientations') 3 | const viewports = Cypress.env('viewports') 4 | 5 | describe("Renders the about page", () => { 6 | viewports.forEach(viewport => { 7 | for (let i = 0; i < orientations.length; i++) { 8 | 9 | it(`(${viewport}-${orientations[i]}) - Renders correctly.`, () => { 10 | cy.viewport(viewport, orientations[i]) 11 | cy.visit("/about"); 12 | cy.get("h1").should("contain", "Welcome to the about page!"); 13 | }); 14 | 15 | it(`(${viewport}-${orientations[i]}) - Renders home page when home link is clicked.`, () => { 16 | cy.viewport(viewport, orientations[i]) 17 | cy.visit("/about"); 18 | cy.get("a").click(); 19 | cy.get("h1").should("contain", "React template"); 20 | }); 21 | 22 | if (viewport === "macbook-11") break; //Ensures tests only run once on this viewport. 23 | } 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /cypress/integration/essential/home.spec.js: -------------------------------------------------------------------------------- 1 | //Env variables on cypress.json 2 | const orientations = Cypress.env('orientations') 3 | const viewports = Cypress.env('viewports') 4 | 5 | describe("Renders the homepage", () => { 6 | viewports.forEach(viewport => { 7 | for (let i = 0; i < orientations.length; i++) { 8 | 9 | it(`(${viewport}-${orientations[i]}) - Renders correctly`, () => { 10 | cy.viewport(viewport, orientations[i]) 11 | cy.visit("/"); 12 | cy.get("h1").should("contain", "React template"); 13 | }); 14 | 15 | it(`(${viewport}-${orientations[i]}) - Renders about page when the /about link is clicked`, () => { 16 | cy.viewport(viewport, orientations[i]) 17 | cy.visit("/"); 18 | cy.get(".nav-link").eq(1).click(); 19 | cy.get("h1").should("contain", "Welcome to the about page!"); 20 | }); 21 | 22 | if (viewport === "macbook-11") break; //Ensures tests only run once on this viewport. 23 | } 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | /// 2 | // *********************************************************** 3 | // This example plugins/index.js can be used to load plugins 4 | // 5 | // You can change the location of this file or turn off loading 6 | // the plugins file with the 'pluginsFile' configuration option. 7 | // 8 | // You can read more here: 9 | // https://on.cypress.io/plugins-guide 10 | // *********************************************************** 11 | 12 | // This function is called when a project is opened or re-opened (e.g. due to 13 | // the project's config changing) 14 | 15 | /** 16 | * @type {Cypress.PluginConfig} 17 | */ 18 | // eslint-disable-next-line no-unused-vars 19 | module.exports = (on, config) => { 20 | // `on` is used to hook into various events Cypress emits 21 | // `config` is the resolved Cypress config 22 | } 23 | -------------------------------------------------------------------------------- /cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add('login', (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This will overwrite an existing command -- 25 | // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /cypress/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-react-ui", 3 | "version": "1.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "@fortawesome/fontawesome-free": "^5.15.3", 7 | "axios": "^0.21.1", 8 | "bootstrap": "^4.6.0", 9 | "lodash": "^4.17.21", 10 | "node-sass": "^5.0.0", 11 | "react": "^17.0.2", 12 | "react-bootstrap": "^1.5.2", 13 | "react-cookie-consent": "^6.2.3", 14 | "react-dom": "^17.0.2", 15 | "react-lazy-load-image-component": "^1.5.1", 16 | "react-router-dom": "^5.2.0", 17 | "react-scripts": "^4.0.3", 18 | "web-vitals": "^1.1.1" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "cypress open" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | }, 43 | "devDependencies": { 44 | "cypress": "^7.2.0" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmanuelGF/template-react-ui/82a74cff1b82ed2550c049302b0d355fc8ce87a1/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 18 | 19 | 28 | 29 | Change this 30 | 31 | 32 | 33 |
34 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmanuelGF/template-react-ui/82a74cff1b82ed2550c049302b0d355fc8ce87a1/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmanuelGF/template-react-ui/82a74cff1b82ed2550c049302b0d355fc8ce87a1/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Change this", 3 | "name": "Change this also...", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter, Route, Switch } from "react-router-dom"; 3 | //Context 4 | import { CtxProvider } from "./Context/ctx"; 5 | //Util 6 | import { AppRoute } from "./Helpers/helpers.js"; 7 | //Layouts 8 | import PagesLayout from "./Layouts/PagesLayout/PagesLayout"; 9 | //Pages 10 | import NotFound from "./pages/NotFound/notFound"; 11 | import About from "./pages/About/about"; 12 | import Home from "./pages/Home/home"; 13 | 14 | export default function App() { 15 | return ( 16 | 17 | 18 | 19 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/Components/Footer/footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Footer() { 4 | return ( 5 |
16 | ©yourBizz {new Date().toLocaleDateString()} 17 |
18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /src/Components/Header/header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | //CSS 3 | import "./header.scss"; 4 | //IMAGES 5 | import { LazyLoadImage } from "react-lazy-load-image-component"; 6 | import "../../../node_modules/react-lazy-load-image-component/src/effects/blur.css"; 7 | import ImgExample from "../../Images/logo-react.png"; 8 | 9 | export default function Header(props) { 10 | return ( 11 |
16 |

React template

17 |
    18 |
  • This is rendering the DefaulLayout with the Header component.
    • 19 |
  • 20 | You can create more layout components on: /src/Layouts. See the about 21 | page example. 22 |
    • 23 |
  • 24 | Using react context to pass some data to the about page (example) you 25 | can use it to pass any other global data you need. 26 |
    • 27 |
  • Also, dont forget to check the README file.
    • 28 |
29 |
Lazy loading image with react-lazy-load-image-component:
30 | 36 |
37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /src/Components/Header/header.scss: -------------------------------------------------------------------------------- 1 | .header-image-example { 2 | animation: rotate 4s linear infinite; 3 | } 4 | 5 | @keyframes rotate { 6 | 100% { transform: rotate(360deg); } 7 | } -------------------------------------------------------------------------------- /src/Components/NavMenu/navMenu.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmanuelGF/template-react-ui/82a74cff1b82ed2550c049302b0d355fc8ce87a1/src/Components/NavMenu/navMenu.css -------------------------------------------------------------------------------- /src/Components/NavMenu/navMenu.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | Nav, 4 | Navbar 5 | } from 'react-bootstrap' 6 | //CSS 7 | import './navMenu.css' 8 | 9 | export default function NavMenu() { 10 | 11 | return ( 12 | 13 | 14 | 15 | 16 | 20 | 21 | 22 | ) 23 | } -------------------------------------------------------------------------------- /src/Context/ctx.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import axios from 'axios' 3 | import { isEmpty } from 'lodash' 4 | 5 | export const CtxContext = React.createContext() 6 | 7 | export function CtxProvider(props) { 8 | const api_url = process.env.REACT_APP_API_ADDRESS 9 | const [data, setData] = useState({}) 10 | 11 | useEffect(() => { 12 | axios.get(`${api_url}/posts`) 13 | .then(response => { 14 | setData(response.data) 15 | }) 16 | },[api_url]) 17 | 18 | return ( 19 | <> {!isEmpty(data) && 20 | 21 | {props.children} 22 | 23 | } 24 | 25 | ) 26 | } -------------------------------------------------------------------------------- /src/Helpers/helpers.js: -------------------------------------------------------------------------------- 1 | import {Route} from 'react-router-dom' 2 | 3 | /** 4 | * For implementing diferent layouts to the pages 5 | */ 6 | 7 | export const AppRoute = ({ component: Component, layout: Layout, ...rest }) => ( 8 | ( 9 | 10 | 11 | 12 | )} /> 13 | ) -------------------------------------------------------------------------------- /src/Images/logo-react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EmanuelGF/template-react-ui/82a74cff1b82ed2550c049302b0d355fc8ce87a1/src/Images/logo-react.png -------------------------------------------------------------------------------- /src/Layouts/DefaultLayout/defaultLayout.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Default Layout 3 | * This will be the main Layout. (Implemented on the Home page). 4 | */ 5 | 6 | import React from "react"; 7 | 8 | //Components 9 | import Footer from "../../Components/Footer/footer"; 10 | import NavMenu from "../../Components/NavMenu/navMenu"; 11 | 12 | import "./defaultLayout.scss"; 13 | 14 | export default function DefaultLayout({ children }) { 15 | return ( 16 |
17 | 18 | {children} 19 |
20 |
21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/Layouts/DefaultLayout/defaultLayout.scss: -------------------------------------------------------------------------------- 1 | .main_layout{ 2 | min-height: 100vh; 3 | display: flex; 4 | flex-direction: column; 5 | } 6 | -------------------------------------------------------------------------------- /src/Layouts/PagesLayout/PagesLayout.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Some Other Layout 3 | * Put some different components before and after {children} to create this layout. 4 | */ 5 | 6 | import React from 'react' 7 | import {Fragment} from 'react' 8 | 9 | export default function PagesLayout({children}) { 10 | 11 | return ( 12 | 13 | 14 | {children} 15 | 16 | 17 | ) 18 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | margin: 0; 15 | padding: 0; 16 | border: 0; 17 | } 18 | 19 | body { 20 | line-height: 1; 21 | } 22 | 23 | ol, ul { 24 | list-style: none; 25 | } 26 | 27 | code { 28 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 29 | monospace; 30 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | //importing css for react-bootstrap components 7 | import '../node_modules/bootstrap/dist/css/bootstrap.css' 8 | //importing css for fontawesome-free 9 | import '../node_modules/@fortawesome/fontawesome-free/css/all.css' 10 | 11 | ReactDOM.render( 12 | 13 | 14 | , 15 | document.getElementById('root') 16 | ); 17 | 18 | // If you want to start measuring performance in your app, pass a function 19 | // to log results (for example: reportWebVitals(console.log)) 20 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 21 | reportWebVitals(); 22 | -------------------------------------------------------------------------------- /src/pages/About/about.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import { Col, Container, Row } from "react-bootstrap"; 3 | import { Link } from "react-router-dom"; 4 | import { isEmpty } from "lodash"; 5 | //Context 6 | import { CtxContext } from "../../Context/ctx"; 7 | //CSS 8 | import "./about.scss"; 9 | 10 | export default function About() { 11 | const { data } = useContext(CtxContext); 12 | 13 | console.log(data.slice(0, 6)); 14 | return ( 15 | 16 | 17 | 18 |

Welcome to the about page!

19 |

20 | ✔This page is using a different layout thats why you dont see the 21 | nav and footer. 22 |

23 | 24 | home 25 | 26 | 27 | 28 |
29 |

30 | {" "} 31 | Data bellow was loaded from https://jsonplaceholder.typicode.com api and 32 | passed from react context. 33 |

34 | 35 | {!isEmpty(data) && 36 | data.slice(0, 12).map((item) => ( 37 | 38 |
{item.title}
39 |

{item.body}

40 | 41 | ))} 42 | 43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /src/pages/About/about.scss: -------------------------------------------------------------------------------- 1 | .about-example-data { 2 | background-color: honeydew; 3 | width: 150px; 4 | margin: 4px; 5 | text-align: center; 6 | } -------------------------------------------------------------------------------- /src/pages/Home/home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import DefaultLayout from "../../Layouts/DefaultLayout/defaultLayout"; 3 | import Header from "../../Components/Header/header"; 4 | import CookieConsent from "react-cookie-consent"; 5 | import "./home.scss"; 6 | 7 | export default function Home() { 8 | return ( 9 | 10 |
11 |
12 | 20 | This website uses cookies to enhance the user experience.{" "} 21 | 22 | This bit of text is smaller :O 23 | 24 | 25 |
26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /src/pages/Home/home.scss: -------------------------------------------------------------------------------- 1 | .home_container{ 2 | margin-bottom: auto; 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/NotFound/notFound.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./notFound.scss"; 3 | import { Link } from "react-router-dom"; 4 | 5 | export default function NotFound() { 6 | return ( 7 |
8 |

404

9 |

Page Not Found.

10 | 11 | 12 | Go Back 13 | 14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /src/pages/NotFound/notFound.scss: -------------------------------------------------------------------------------- 1 | .error { 2 | height: 100vh; 3 | background-color: rgba(182, 55, 55, 0.904); 4 | font-family: 'Montserrat', sans-serif; 5 | color: #fff; 6 | display: flex; 7 | flex-direction: column; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | 12 | .error h1 { 13 | margin: 14px 0 40px; 14 | font-size: calc(17vw + 40px); 15 | opacity: 0.85; 16 | } 17 | 18 | p { 19 | opacity: 0.8; 20 | font-size: 20px; 21 | margin: 8px 0 38px 0; 22 | font-weight: bold; 23 | } 24 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | --------------------------------------------------------------------------------