Hi there! In this repository you will find the result of our Final project for Module 3 - Promo Radia - Adalab, created for the React Module of Adalab's Full Stack Developer Bootcamp.
The exercise consisted on adapting a legacy code inherited from another team and developed with HTML, Sass and Javascript to React framework, maintaining both the aesthetics and functionalities of the web application.
You will find our team's information below, don't hesitate to visit our profiles to discover more projects!
- Ana Lozano: @Ana-Purple-Dev
- Ana Bollain: @anabollain
- Mónica Hidalgo: @mhidalgoma
- Natalia Gómez: @Natalia-GP
- Analyze and refactor a legacy code from another team.
- Identify the web components (unique and reusable) and create a tree-structure hierarchy based in React.
- Study information flow and events to identify state variables, props and lifting where needed.
- Create a SPA (Single Web Application) and use react-router-dom to change the content and URL of the site avoiding requests to the server.
- Work with useState and lifting for all data associated with events and users manipulation.
- Work with Local Storage to improve users experience, so all filled data is available when refreshing the site.
- Use git control and branches to test and merge new code.
- Implement Scrum as our framework and use the Agile methodology for the project's organization and team communication.
The Algebraic Profile Cards responsive web application allows you to create a completely personalized contact card that you can share online.
When visiting our site, you will first access the Landing Page. By clicking in the Comenzar button, it will lead you to the site where you will be able to create your card.
To do so, you will find the following tools:
- A design section where you will be able to choose between three different color palettes.
- A fill section to introduce all your personal data, as well as a photo that identifies you. If you are feeling creative, you can also upload an animated GIF ✨.
- A share section where your personalized card will be created when clicking in the button if you have filled all previous fields.
- A preview card section with a reset button, when clicking on it, all fields will empty and the site will be restored to its initial state.
Not only your card will be available within the URL address that will appear beneath the Share section, but you will also be able to share it via Twitter.
Our goal is to always improve your experience. To do so, you will notice that the card updates while you are filling the information, we want you to be able to see how your card will look before creating it.
That's not all! If your browser closes by error or you exit and revisit the site, all the filled information will still be available.
We hope you enjoy the experience! 🎉
- Languages:
- HyperText Markup Language: HTML5.
- Style Sheet Language : Advanced CSS with responsive design.
- Programming Language: Vanilla JS.
- JavaScript XML: JSX.
- JavaScript Library: React Native.
- Task Automation: Gulp.
- CSS Pre-processor: Sass.
- Git Version Control: GitHub.
- Local Storage: LocalStorage.
- API Calls: submit and retrieve data from a server.
- Tree-structure: organize the project with a tree-structured hierarchy.
- Components: identify unique and reusable components.
- UseState: state variables for all data manipulated by the user.
- Props: information flow from superior to inferior components.
- Lifting: working with events and moving information up.
- Routes and Links: SPA with react-router-dom.
- Manage events in each component.
- JSON.
- NodeJS.
- Adalab - React Starter Kit.
This project has been developed with a React Starter Kit, where a series of pre-installed and pre-configured tools and dependencies are available to optimize and organize the project.
To be able to work with it, you will have to follow the next steps:
- Create your repository.
- Copy all project files in the root file of your repository.
- Open the shell command and install all necessary dependencies listed here below:
npm install
npm install node-sass
npm install react-router-dom
npm install compressorjs- Once all dependencies have been installed, you will be able to run the project typing in the shell command:
npm start- This command:
- Opens a new window in Google Chrome and shows the web application, just as the VS Code Live Server (Go Live) plugin does.
- While opened, it observes all the files within the
src/file, so when any of them have been changed it will refresh your page in Google Chrome. - It also processess the files HTML, Sass / Css and JSX so that the browser is able to read them. For instance:
- It converts Sass into Css.
- It converts JSX into HTML and Javascript.
- Once you have executed
npm start, you can start to work with all files withinsrc/and code comfortably.
You can have a look of the outcome in Github Pages: Coding Time.
We hope you enjoy it as much as we did 😉.