NextJS TypeScript React Contact List

TypeScript React application for managing User Contacts
View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

Built With

• Next.js using React
• Next.js API routes and Prisma Client
• Typescript
• Material-UI
• Mocking data for development and testing on both client and server with Mock Service Worker (MSW)
• Formik forms with yup validation
• Safely serialization of JavaScript expressions to a superset of JSON with superjson
• Linting with ESLint
• Formatting with Prettier
• Linting, typechecking and formatting on by default using husky for commit hooks
• Unit testing with Jest and react-testing-library
• e2e testing with Cypress

(back to top)

Getting Started

Prerequisites

• Node.js 12.22.0 or later

• npm

  npm install npm@latest -g

• using yarn is strongly advised:

  npm install --global yarn

Installation

1. Clone the repo

   git clone https://github.com/pROFESOR11/contact-list.git [your-project-name]

2. Install dependencies with npm or Yarn:

   cd [your-project-name]
   
   npm install
   # or
   yarn

3. For database you have two options for local development:

• Using Postgres

Copy .env.example as .env and set DATABASE_URL:

DATABASE_URL=postgresql://__USER__:__PASSWORD__@__HOST__/__DATABASE__

• Using SQLite

Open src/prisma/schema.prisma:

datasource db {
-    provider = "postgresql"
-    url      = env("DATABASE_URL")
+   provider = "sqlite"
+   url      = "file:./dev.db"
}

4. Run the following command to create your SQLite database file. This also creates the Contact and Tag tables that are defined in src/prisma/schema.prisma:

npx prisma migrate dev --name init

5. Now, you can optionally seed the database with the sample data in src/prisma/seed.ts by running the following command:

npx prisma db seed

6. Start dev server with:

yarn dev

(back to top)

Usage

This application helps user to manage his/her contacts with the following functionalities:

• Create Contact
• View Contact Details
• Update Contact
• Delete Contact

A contact may have the following attributes:

• Name
• Last Name
• Telephone number
• Email
• Date of birth
• Picture/Avatar
• Link to personal website
• Tags

(back to top)

Roadmap

• [] Acquire contact wallet addresss
• [] Abilitiy to send crypto currency with MetaMask

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/featureX)
3. Commit your Changes (git commit -m 'Add some featureX')
4. Push to the Branch (git push origin feature/featureX)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.md for more information.

(back to top)

Contact

Ali Cimen - [email protected]

Project Link: https://github.com/pROFESOR11/contact-list

(back to top)

Acknowledgments

• Why superjson?
• Why using PostgreSQL for Vercel deployments?
• ElephantSQL for super-easy access to a PostgreSQL database

(back to top)