hmjatt / Digital-Business-Card-ReactJS

Creating a Digital-Business-Card to get better at ReactJS

Digital-Business-Card-ReactJS 🎴

Creating a Digital Business Card with ReactJS

Live Preview

About ℹ️

This project is created to practice ReactJS. Showcasing my Digital Business Card which comprises About, Interest and other information about me. While creating this project I learned about creating/organizing React Components, Styling With Classes, using Figma Design Templates, etc. After creating the project, deployed it to github-pages 🐦 Feel free to reach me at Twitter ♾️

Technologies Used 💻

         

Includes the following features/components ⚙️

- NPM
- ReactJS
- Custom Components
- create-react-app
- Figma
- github-pages

Usage 🤓

cd digital-business-card

npm install

npm start

Steps I followed to complete this project 🪜

1. Initialize Project 🎍

   • Initailize the project using npx create-react-app digital-business-card which will create a complete React App pre-configured and pre-installed with all the dependencies.
   • Import Oxygen font from google fonts.
   • Add reapating svg as a background.

2. Organize components 🗄️

   • Create a components folder inside src directory.
   • Create custom components inside components folder.
   • Create an images folder inside src directory and move images/logos inside it.

3. Header Custom Component 🧩

   • Create Header component and basic JSX elements for it.
   • Add Email and LinkedIn Logos.

4. MainContent Custom Component 🧩

   • Create MainContent component and basic JSX elements for it.

5. Footer Custom Component 🧩

   • Create Footer component and basic JSX elements for it.
   • Add Email and LinkedIn Logos.

6. Import Components 🪢

   • Import Header, MainContent, Footer components inside App component.

7. Styling Components 🎨

   • App

     • Added style to body element and App component.

   • Header

     • Add appropriate classNames to elements in Header component.
     • Style Header component.

   • MainContent

     • Add appropriate classNames to elements in MainContent component.
     • Style MainContent component.

   • Footer

     • Add appropriate classNames to elements in Footer component.
     • Style Footer component.

8. Clean directory🧹

   • Delete unnecessary files from directory and format code with Prettier.

9. Deploy 📤

   • Use Official Documentation(link) to push project to GitHub Pages

Links to content that helped me with this project 🔗

1. The Odin Project

   • React Introduction
   • React State & Props

2. Figma Design

   • Digital Business Card

3. Scrimba

   • Learn React

4. React Official Documentation

   • React Hello World Example
   • Introduction To JSX
   • Rendering Elements In React
   • Components and Props
   • Deployment to gh-pages

5. YouTube

   • ReactJS Basics Video Series From Academind
   • ReactJS Tutorial Video Series From Codevolution
   • React & Webpack 4 From Scratch - No CLI from Traversy Media
   • The introduction to React you've been missing - Kent C. Dodds(explains how React works under the hood)

Quote ✒️

"Success is not final; failure is not fatal: It is the courage to continue that counts."
— Winston S. Churchill

🌠 🏞️