This project was bootstrapped with Create React App.
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.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
This project was designed as a comprehensive learning experience to delve into React development, utilize various libraries, and implement a responsive design using Tailwind CSS. The key focus was to build a modular and scalable web application with distinct components and integrate animations and interactive elements effectively.
- Modular Design: Learned to split code into separate components to make the codebase more manageable and reusable.
- Component Integration: Mastered the art of linking components together to form a coherent application architecture, specifically linking multiple components to a central homepage component.
- React Spring: Utilized React Spring for implementing smooth and natural animations, enhancing the user interface and user experience on web platforms.
- Mobile Slider Library: Gained hands-on experience with a library designed for mobile sliders (name forgotten) to create touch-responsive, swipeable components.
- Tailwind CSS: Learned to use Tailwind CSS for styling, focusing on its utility-first approach and the importance of mobile-first design.
- Responsive Design: Emphasized designing for mobile devices first before scaling up to desktop views.
- Tailwind Configuration: Learned how to customize Tailwind's configuration to include custom colors and other specific utilities.
- Netlify Deployment: Explored deploying websites through Netlify, taking advantage of its seamless integration with GitHub and built-in SSL certification features.
- Development vs. Production Commands:
npm start: Used for running the application locally during the development phase to test features and changes in real-time.npm run build: Learned that this command is used to create a production build of the application, optimizing performance and preparing the app for deployment.
- TUK: Utilized https://app.tuk.dev/ to quickly find and implement common UI sections like footers and headers, speeding up the design process.
This project not only enhanced my technical skills in using React and Tailwind CSS but also deepened my understanding of web application architecture and responsive design principles. The integration of animations and handling mobile responsiveness were key achievements that improved the overall functionality and aesthetics of the application.