| Art Marketplace |
|---|
 |
| Azordev's art markeplace |
| 🐞 Report a bug or 🙋♂️ request a feature |
  |
A place where you can find a download Art images. We have adapted and implemented the Cleveland public API to get the examples of art images for this project.
- Basic
create-react-appstructure - Sets
stylelinton the repo - Sets
eslintrules - Linters
- React
- React-DOM
- React-Create-App
- PropTypes
- ES6 syntax
- Export/import ES6+ notation
create-react-appESLintpnpm6.20.3 +vscodewith ESLint extension- Linux/GNU, macOS, Windows
- Love and Passion for code
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)
- Clone the repository
git clone https://github.com/Azordev/art-marketplace.git
- Go to the project folder
cd art-marketplace
- Install dependencies
npm install
or
yarn install
- Run
npm start
or
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 localhost:3000 and you will have access to the project.
- Copy the
.env.examplefile in a new.env.developmentor.env.productionfile - Put the correct values at the example. If you don't know about the correct keys, ask to the project leader about it
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.
TailwindCSS: Too we have used TailwindCSS, which is a CSS framework that help a lot with the CSS giving utilities classes and other tools to do the CSS more friendly for developers. Tailwind 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.
- Control Over Styling: Tailwind is a unique CSS framework when it comes to styling web applications, meaning that Tailwind does not have a default theme that you have to use like other CSS frameworks. For example, you can give each project a different look even if you use the same elements (color palette, size, etc.). Therefore, it’s one of the few CSS frameworks that is not opinionated on how you should style your project.
- Faster CSS Styling Process: There is no faster framework than Tailwind when it comes to styling HTML. As a result, you can easily create good-looking layouts by styling elements directly. This is possible because Tailwind offers thousands of built-in classes that do not require you to create designs from scratch.
- Minimum size of file: Tailwind CSS works in the front end of a website. For this reason, it is reasonable for developers to demand ultimate responsiveness. Well, Tailwind provides the ability to create responsive themes for your web applications and remove all unused CSS classes. With PurgeCSS, Tailwind helps you keep your final CSS as small as possible.
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: Is here where the instances of axios are configured. mock: At this folder we save the mock data used for test. styles: Here we get the global styles that we can use throughout the project. |
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:
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.
How do I create a new component?
In the component folder, create a new file with the .jsx extension. Make sure to put an appropriate name to the functionality that you are going to develop.
In the project directory, you can run:
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.
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.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
- <Insert your great idea here!>.
| Israel Laguan |  Email me to [email protected] /  Connect to my Linkedin |
|---|---|
 |
|
| Victor Peña | Email me to [email protected] / Connect to my Linkedin |
 |
|
| Emmanuel Azócar | Email me to [email protected] |
 |
|
| Angelica Molina | Email me to [email protected] |
 |
|
| Roman Rodriguez | Email me to [email protected] |
 |
|
| Tony Tarco | Email me to [email protected] |
 |
|
| Ildebrando Quinchoa | Email me to [email protected] |
 |
|
| Eghinner Hernandez | Email me to [email protected] / Connect to my Linkedin |
 |
 |
🤝 Contributions, issues and feature requests are welcome! Feel free to check the issues page.
🤗 Give a ⭐️ if you like this project!
- https://blog.logrocket.com/deep-dive-into-lefthook-react-native/
- https://blog.logrocket.com/build-robust-react-app-husky-pre-commit-hooks-github-actions/
- Favicon from favicon.io
- https://www.seoptimer.com/meta-tag-generator
- https://dev.to/nitzano/linting-docker-containers-2lo6?utm_source=lefthook
📝 This project is licensed under the Apache 2
Feel free to fork this project and improve it!