Awesome Profile Cards 🌻

This app allows the user to create a digital card with their data: full name, position and links to their contact details and social network profiles.

We area a team of five students and we used html, sass and javascript partials compiled with node/gulp.

We received the following design,

but we felt we wanted to improve the project by adding a extra value: a meaningful design: Botanical Profile Cards

- Requirements

The project consists of 2 pages

• a welcome page
• a page with the application to create cards

The application work through this steps:

• Allow the user to choose the style of the profile card, by 3 color palettes and the possibility of adding an extra frame or not.

• Allow the user to preview the result of the data introduced in the preview card.

• Check that the information provided by the user is correct. If it is not, show an error message .

• Allow the user to create and share a web with is profile card and share it in Twitter

• Data is saved in the Local Storage and showed in the preview card.

• Modifications in data or design will automatically appear in the preview card.

• Data has format restriction as indicated.

• The different design sections are collapsible when clicked.

You could check the result in this example or create your own with our application.

Learnings 💡

• Learning basic concepts of programming.
• Learning how to manipulate the Document Object Model, with event listeners, to change your page in response to user actions.
• To handle complex data structures, with arrays and objects.
• To request data to the server and store data locally.

Tools 💻

• JavaScript
• HTML 5
• Node - Gulp
• CSS - SASS.

How to run this project? 👇

• You need to have Node.js installed

• Clone or download the repository in your computer.

To install local dependencies, type:

npm install

Also, you need to install React Route and SASS:

npm install node-sass

In the project directory, type:

npm start

This runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

You can also create a docs folder by running #### npm run docs

Team 👋

This project was created by Livecode Team:

Elena Ramírez Reinoso 🔗

Sonia Sanz Vivas 🔗

Virginia Gómez Rodríguez 🔗

Kayla Jean Crane 🔗

Marisol Peña 🔗

Ecofriendly 🌍

You do not need to print the awesome profile cards, just share it 😊