Skip to content

Latest commit

 

History

History
73 lines (55 loc) · 3.74 KB

README.md

File metadata and controls

73 lines (55 loc) · 3.74 KB
Raw

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.

Used Technologies

  • 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.

Steps we followed:

🔍 Project analysis

  • 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.
📋 React Layout
  • 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.
⚛️ React Full version
  • Perform interactivity, using React state and events.
  • Implement communication with the backend, sharing and offline.
  • Create landing page.
  • Implement routing with React router.

Scripts to start the project

  • 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

Responsive design 📱 💻

Development using mediaqueries and mobile first strategy

Mobile

Tablet

Desktop

Developers:

If you want to collaborate or change anything to improve our project, please, feel free to create a new branch and a pull request.