Frontend Template

Frontend Template

Azordev's frontend template
🐞 Report a bug or 🙋‍♂️ request a feature

Frontend Template

Frontend Template Docs

Frontend Template is made to boost the creation of your project, giving you a basic project with various tools already configured. We already have configured EsLint, Prettier, Spell, Lefthook, TypeScript and we are giving you some utils methods for example to Error Handled in your Frontend Project. Just clone and start to develop!

Features

Sets stylelint on the repo
Sets eslint rules
Linters
React
React-DOM
PropTypes
ES6 syntax
Export/import ES6+ notation

Built With

npm create vite@latest --template react
ESLint
npm 7.0.0 +
vscode with ESLint extension
Linux/GNU, macOS, Windows
Love and Passion for code

Pre requirements

Before to start you need have some requirements:

Node.js > v14.0.0

Node.js is a runtime environment for Javascript that allows us to use the language outside of the browser, in this case we use it to configure and run the development server.
npm > v6.0.0

npm is a package manager for Node.js and comes installed with it, we use it to install and manage application dependencies.
Git > v2.0.0

Git is a version control system for code, we use it to manage the different branches of the code.
Connection to internet
Visual Studio Code or another code editor (optional)

How to run the project:

Clone the repository

git clone https://github.com/Azordev/frontend-template.git

Go to the project folder

cd frontend-template

Install dependencies

npm install

yarn install

npm start

yarn start

After executing any of the above commands, a development server will start; generally on port 3000. You must go to your browser and enter to localhost:3000 and you will have access to the project.

Create a .env file

Create a .env file.
Put your secret keys in it. You can use the .env.example how guide to add .env keys to your project.

Technologies:

The project has been developed using various technologies. Some of them are:

React: For the front, React has been used, which is a powerful framework that allows us to interact dynamically with the DOM and encapsulate tons of functionalities through components. React Docs.

Axios: Axios is a library that serves to create HTTP requests that are present externally. This ease the way to get data that isn't at the website else that is get from some API.

EsLint: We like that our projects handle a clean code; that's why every time you commit & push, EsLint will analyze your input to make sure it complies with best practices.

Emotion.js: Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities.

Advantages of emotion

Smaller
CSS API is much more powerful. You can use it by itself if you like that method of writing styles better.
Source Maps
Better SSR story in my opinion
You can use the babel plugin for even more optimization
Custom Styles plugins can be used
Custom classes labels for more easy styles debug

File Structure:

The magic of the project happens inside the src folder. It is there where you will find all the components, pages and styles.

assets: In this folder we place all the graphic resources. If you need to add / use a new image, this is the site.

components: The components are functionalities that we can reuse in many parts of our project. For example, if we need a button; we develop it only once and then we can call it as many times as we need it. We like to separate styles from logic and structure. That is why in this folder you will find styled components that are then used in the layout file.

pages: Here we place the structure of each section of the project and it is where we mostly use the components

actions: Axios work using instances, is here where the axios instances are used to call the data from the API server and is returned processed to the FrontEnd.

config: Here are some constants on the project that we might want to change later.

The emotion js:

React allows us to develop html elements from css styles that we can then use in layouts. It is a practical way to organize our components and avoid the use of pure html and inline styles in the views.

GIT USE:

There are some rules that apply when interacting with the project repository. This will allow us to have a standard that any developer can understand. It is important to comply with these rules so that the linting tool allows us to use the repository.

Branch:

Every time an issue is assigned to you, you must create a new branch. This can be done through the command:

git branch <name of branch>

For convenience, the branches should have a defined structure. For example, if the issue is about adding a new feature, the branch should be:

feature/#issuenumber-brief-description-of-the-feature

Suppose we have issue #12 that asks us to add a header to the main page. Then, the branch would be as follows:

feature/#12-add-header-to-main-page

If it is about solving a bug, we just have to put the word "fix" in front of it. For example:

fix/#14-remove-bad-media-queries-in-rating-component

Commits:

We have configured CSpell with LeftHook to check maintain a clean commit nomenclature, the rule that we are following is: <fix or feat>: <lowercase message>. CSpell too is looking for typos on the commit message and don't allow do commit if exist a typo.

Then, like branches, commits must also follow a format. Notice how the commit message varies if it is a feature or a bug fix.

feat: added header to main page

fix: removed bad media queries in rating component

Pull Request (PR):

The PR’s are requests that as developers we make once the solution of an issue is completed and we want the code to be integrated into the master branch of the project. Before that, we must ensure that our code is fully functional and adhering to best practices.

Once we have done a commit & push in our branch, a notification with a yellow background will appear in the github repository and will ask us to continue with the PR. In the TextArea to perform the PR you will find several sections that you want to complete: A brief description of what you did, a snapshot (if applicable), the tasks that were completed and the steps to view them.

Available Scripts

In the project directory, you can run:

npm run dev: Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm run build: Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

See the section about deployment for more information.

Learn More

You can learn more in the Vite documentation.

To learn React, check out the React documentation.

Collaborators

Israel Laguan	Email me to contact@israellaguan.com / Connect to my Linkedin

Victor Peña	Email me to victordev2002@gmail.com / Connect to my Linkedin

Emmanuel Azócar	Email me to azocarmel@gmail.com

Angelica Molina	Email me to angeli.molina1@gmail.com