Contes - Profile Page

WHAT HAVE I LEARNED BY BUILDING THIS PROJECT?

-How to render components in a more harmonic way

React Bootstrap - I practiced more using this library for responsive desgin

THINGS I SHOULD FOCUS ON NEXT

-Implement back-end service to store the data and the image

-Create a a way to crop and rotate the profile picture

-Offer a country list and postal code validation

Introduction

I`ve built one more block of my e-commece application, at the end all these smalls pieces are going to feet together to provide my e-commerce experience

The main focus in this project was to practice a little of designing thinking and how to apply that in the front-end development. To achieve this goal I first thought about how I`d like the form to look like and then I made a draft using Figma to play a little with the colors and spaces.

Finally I tried to bring this layout to reality, using React and Bootstrap for a responsive design

Reflection

Building this project I came to the conclusion that when we are thinking about an application, several idead pop up from our mind, but as we lack practical experience is very hard to measure the complexity and the amount of time needed to building something up

Designing

This time I decided to try something different, before coding I enrolled in a Figma crash course and then I designed my layout before coding the whole interface

https://www.figma.com/file/G18UXzXD6gTdPivvv8bBMU/profilePage

Project`s Preview

Installation

Clone down this repository. You will need node, npm or yarn installed globally on your machine.

yarn
yarn start

npm install
npm run start

The server should start at:

localhost:3000

Deployed version

https://contes-profilepage.herokuapp.com/

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

`npm start`

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

Luizcontes/profilePage