Connect Cards

A website to display/advertise business cards which are styled like pokemon cards. Offer the ability for users to have their own page full of their own links like linktree.

Usage

Instructions on how to add your own card are here: https://connect-cards.vercel.app/add-card.

In summary you have to fork the repo, make changes to the users.json file and then submit a pull request.

You can do all this in github, no cloning the repo down to your local machine.

If you find it difficult to use or have any feedback, feel free to submit an issue on this repo.

Minimum Viable Product:

• Create default card component to display user info
• Have a search bar/filter component to search different cards
• Have a seperate page for each user where links are displayed like linktree.

Extension:

• Add signup/login page with authentication
• Replace json with an actual dataset

Planning

• kanban: https://github.com/users/Aebel-Shajan/projects/3/views/1?layout=board

Technologies

Use	Technology	Description
Languages	html, css, javascript	Core web development languages.
Frameworks	React	Library for building UIs.
Build tool	Vite	Fast, lean build tool for modern web projects.
Package manager	NPM	NPM Manages project dependencies.
Deployment	Vercel	Platform for frontend frameworks and static sites.
Documentation	JSDoc	Generates documentation from comments.
Linter	EsLint	Identifies and reports on code patterns.
Code Formatter	Prettier	Ensures consistent code style.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Make sure you have the following installed:

• Node.js (version 14.x or above)
• npm (version 6.x or above)

Installation

1. Clone the repository:

   git clone https://github.com/aebel-shajan/connect-cards.git

2. Navigate to the project directory:

   cd connect-cards

3. Install the dependencies:

   npm install

4. Run commands:

command	description
npm run dev	Runs the app in development mode. Open http://localhost:XXXX to view it in the browser.
npm run build	Builds the app for production to the dist folder. It correctly bundles React in production mode and optimizes the build for the best performance.
npm run preview	npm run preview / yarn preview
npm run lint	Runs ESLint to analyze the code for issues.
npm run format	Runs Prettier to format the code.

Contributing

1. Create branch with feature you want to work on:

git checkout -b feature/{FeatureName}

2. (Optional) Pull branch from repo if it already exists:

git pull origin feature/{FeatureName}

3. Make changes in code, testing features by running app in dev mode by doing:

npm run dev

4. Format code by doing:

npm run format

5. Commit your changes:

git add .
git commit -m "Describe feature changes here."

6. Push changes and create pull requests:

git push origin feature/{FeatureName}