https://github.com/calebcadainoo/together-component

A React component written in Typescript for Together Price (Italy)
https://github.com/calebcadainoo/together-component

google-fonts material-icons material-ui react typescript

Last synced: 17 days ago
JSON representation

A React component written in Typescript for Together Price (Italy)

• Host: GitHub
• URL: https://github.com/calebcadainoo/together-component
• Owner: calebcadainoo
• Created: 2021-03-02T13:03:35.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-03-02T14:00:33.000Z (almost 4 years ago)
• Last Synced: 2024-03-31T15:25:46.835Z (9 months ago)
• Topics: google-fonts, material-icons, material-ui, react, typescript
• Language: HTML
• Homepage: https://together-component.web.app
• Size: 501 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Together Price - SearchContactCard Component

 A React component written in Typescript for Together Price (Italy) 

 ### Preview 

 ![SearchContactCard](together.png)

 ### Walkthrough of Process

 1. Created a color palette from the Figma designs in the *`App.css` file*

 ```sh

:root{

  --app-back-color: #e5e5e5;

  --app-fore-color: #ffffff;

  --app-theme-color: #6a3eea;

  --app-soft-theme-color: #eae8fe;

}

```

2. Imported `Poppins` Font choosing weights: *`400, 500 and 600`* from Google Fonts in the *`index.css` file line 1*

```sh

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

```

3. Created a *`components`* folder to hold *`SearchContactCard` component*

4. Created a *Typescript `interface`* with the specified json object as a guide.

5. Designed the component using *`CSS3, Material UI and Material UI Icons`*

6. Used the *`SearchContactCard`* component in *`App.tsx`*

7. Hosted a production version of the component on 🔥 Firebase 

8. Link: https://together-component.web.app/

*`NB:` I added the build folder to the repo to make it easy to access and quick usablity*