This is the development of a clone of the Shopify Plus landing page with the intention of improving the use of the technologies that I will mention later and focusing on even the smallest detail to make it as pixel perfect as possible.
- Use the same colors
- Distribute the elements in a similar way
- Implement the same styles functionalities
- Do not use CSS file
- Real Site: Shopify Plus
- Clon Site: Shopify Plus Clon
I fully learned the Tailwind framework because it's literally my first time using it, I read the documentation and my goal was not to use a CSS file, which I fully achieved, however I still need to understand the classes in this framework pertaining to responsive design, which is the one that I will implement later when I have the knowledge.
In addition to the above, regarding the React library, I had already worked on a project with it, however I improved and expanded my knowledge and skills in the distribution of files and folders in their corresponding places.
As mentioned in the previous section the layout of the site is not responsive, however I will implement it once I learn Tailwind responsive, also while developing the project I was able to notice constant changes to the layout which I am thinking of copying as well for be exact.
All these changes will be updated in this section.
- React - This is a link to the official React JS documentation.
- Tailwind - This is a link to the official Tailwind CSS documentation.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
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.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
- Website - XNeyMo Dev
- Linkedin - Neyan Manuel Montes Abad
- Gmail - xneymodev@gmail.com