Collaborative Project at Adalab

Awesome Profile Cards

Table of Contents

1. Introduction

2. Installation

3. Description

4. User Stories

5. Team members

---

1. Introduction

This repository includes the group project of Module 2 of the Web Development bootcamp of Adalab, a Front-End development course focused on women without previous programming knowledge.

This project has been carried out by 5 students and it has been our second collaborative website developed. In this project we have developed an interactive web application to create a personalized business card. On the website we can enter our professional data and obtain a layout view with this information.

---

2. Installation

It requires node.js

Run the following commands in order to have the code up and running on your machine:

   # installs dependencies 
  npm install
   # Runs the app in the development mode.
   # Open http://localhost:3000 to view it in the browser.
   # The page will reload if you make edits.
   # You will also see any errors in the console.
  npm start

---

3. Description

The website consists of 2 pages:

1. A welcome landing page.
2. A page with the card maker app.

• Technological stack applied in this project:

1. Layout: HTML5, CSS3, Flexbox, SASS, BEM

2. Javascript

• Specifications

In the development of this web application we have used the following technologies:

• Advanced use of HTML forms

• Layout using advanced CSS, like flex

• Use of mediaqueries so that the design is adaptable to the device using the mobile first strategy

• Event management in the browser

• Access and send data to a server

• Local storage using LocalStorage

• Using git for project version control

• Publishing the result to the Internet using GitHub Pages

• Handling of Slack, GitHub, GitHub projects, GitHub pages, VSCode, Gulp, Terminal, Zeplin.

• Working methodology:

1. Planning and executing projects under the Scrum/Agile framework.
2. Using git for project version control as a team
3. Publishing the result to the Internet using GitHub Pages
4. Implementation of Scrum as a reference framework for product development, always based on Agile values as key points of teamwork and continuous improvement
5. Fluid communication among team members

• How it works

The application works by following these steps:

• Allow the user to choose the style of the card, choosing a color palette
• Allow the user that, by entering information in a form, this text is displayed automatically laid out in a box similar to a business card, which will be the sample of the final result
• Allow the user to create a website with their card and share it on Twitter

Both pages have an established design. The design is made for 3 device sizes:

1. Mobile, under 768px 2. Tablet, from 768px to 1200px 3. Desktop, from 1200px

---

4. User Stories

For project management, we will use user stories, a tool to define the characteristics of a product.

1. First. Landing and UI -Develop the landing page -Develop a first basic version of the web, with the layout of the basic structure (for desktop and mobile) that includes the form with the collapsible and the preview

2. Second. Interactive version -Interactive form: when modifying a form field, both the card design and the user data (except the photo), the preview is updated -Perform form data validations: mandatory fields, email, etc.

3. Third. Share -Photo update in card preview, using provided component -Add the functionality to share on Twitter, first sending the data to the server to obtain the URL to share

4. Fourth. Offline version -Have content stored in the browser's LocalStorage

---

5. Team members

Claudia Berrocal

Patricia Malvido

Mireia Suero

Begoña del Pozo

Norma Rivas