Giter VIP home page Giter VIP logo

emadnahed / digitalcard Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 0.0 1007 KB

In today's digital age, more and more people are turning towards digital solutions to simplify their lives. One such solution is the digital card, a virtual representation of a physical card. Digital cards are becoming increasingly popular as they offer several advantages over traditional physical cards.

Home Page: https://mydigitalreact.netlify.app/

HTML 9.80% CSS 27.52% JavaScript 62.68%
digitalcard outlet react react-router reactjs usenavigate-hook usestate

digitalcard's Introduction

Table of Contents:

  • Motivation
  • Why this project?
  • Project Description:
  • Screenshot and link reference
  • How to Install and Run the Project?
  • The learning Process

Motivation

This project is a web application developed with React and the react-router-dom library. Its purpose is to showcase and manage a collection of digital cards, offering a user-friendly experience for creating, editing, and viewing them seamlessly. The homepage features a Navbar for navigation, leading to the FormCollection component for managing cards. This component is a dynamic form capable of handling multiple cards with various properties. A Samplecard component demonstrates the potential design and functionality of digital cards. Additionally, a DigitalCard component allows users to view and interact with individual cards in detail. Overall, the project demonstrates how React and react-router-dom can be utilized to create intuitive web applications for managing digital content effectively.

Why this project?

This project is a web application developed with React and the react-router-dom library. Its purpose is to showcase data provided as a digital card, offering a user-friendly experience with simplification seamlessly. The homepage features a Navbar for navigation, leading to the FormCollection component for creating a digital card. This component is a dynamic form capable of handling creation of digital card with various properties. A Samplecard component demonstrates the potential design and functionality of digital card. Additionally, a DigitalCard component allows users to view and interact with individual cards in detail. Overall, the project demonstrates how React and react-router-dom can be utilized to create intuitive web applications for managing digital content effectively.

Project Description

You will basically need to fill the form with the requested information and the digital card will be created for anyone.

This project is a simple web application built using React and the react-router-dom library for routing. The application has a navigation bar component (Navbar) which is the parent component of all other components in the application. The default route ("/") displays the FormCollection component. There are two other routes defined - "/samplecard" which displays the Samplecard component and "/DigitalCard" which displays the DigitalCard component.

Screenshot and link reference

Below is the landing page wherein form is required to be filled.

1709250043671

Below is the page which is a sample of how the digital card looks when created:

1709250063807

How to Install and Run the Project?

Quick start:

$ npm install
$ npm start

The learning Process

  • Composing the props receiving component which receives the props and applies it to make a digital card.
  • Composing a component which collects, handles and processes the received information.
  • Creating Routes for default landing page and the page to where it navigates upon form filling.
  • passing state through useNavigate.
  • A sample digital card to showcase how it looks like.

digitalcard's People

Contributors

emadnahed avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.