Final team project during the bootcamp at Adalab
Using React, we have refactored the code of a functional website for making digital business cards, that was initially created with Vanilla JavaScript.
The main idea of this project was to learn to work with legacy code, something that often happens in the programming world, developing our ability to modify code created by other people and making us aware of the importance of creating good code.
- Sass for styling.
- ES6 and React for structuring the application JavaScript.
- Git for version control, using branches.
- Publication on the Internet using GitHub Pages. In addition, we have implemented the following new features:
- Transitions and/or animations to improve interactions with the application.
- Navigation between the different pages of the application using React router.
- Create a new repo with the React project
- Create, inside such repo, a folder with version 0 (legacy code).
- Analyse and test the code and understand its structure in order to adapt it to our needs and knowledge.
- Fix bugs detected in the code.
- Implement improvements in the legacy code, without modifying the functionality.
- Define the React component structure of the application.
- Generate the components of the project and communicate information through props.
- Create branches to work on the different components and avoid touching the master branch.
- Perform interactivity, using React state and events.
- Implement communication with the backend, sharing and offline.
- Create landing page.
- Implement routing with React router.
- You need to have Node.js
- Clone or download this repo and open your code editor.
- To install the dependencies:
npm install - To run the app in the development mode.\
npm start
Open http://localhost:4000 to view it in the browser. The page will reload if you make edits.
You will also see any lint errors in the console. - To publish to production ("build && rm -rf docs/ && mv build/ docs/* && git commit -m 'Update github pages' && git push") :
npm run docs-and-push
Development using mediaqueries and mobile first strategy
If you want to collaborate or change anything to improve our project, please, feel free to create a new branch and a pull request.