user-contacts

Getting Started

Installation

yarn

Run the server

yarn dev

Open http://localhost:3000 with your browser to see the result.

Demo

Here is a working live demo : https://kkstream-contacts.vercel.app

Technologies

• React
• Redux
• Next.js
• TypeScript
• Responsive Web Design

Testing

• Cypress (End to End Testing)

Tools

• ESLint
• Prettier

Features

The Production Ready React Framework - Next.js

Using Next.js to embrace lots of features with little or no configuration required, like server-side rendering capabilities, file-system based routing, code splitting, and other features we need for production.

Strongly Typed JavaScript

Using TypeScript to save time for catching errors and providing fixes before you run code.

Ensuring Code Quality and Keep Style Consistent

Using ESLint and Prettier as the code linter and formatter to enforces a consistent style, find and fix problems.

End to End Testing with Cypress

Using Cypress to test both logic and view, such as adding a new contact, deleting existing contact, validating user input, and so on.

Description

1. Home page is a table to show all the user contacts
2. You can add a new contact to the list by tapping the Add User button and type in valid name and email to the popup modal
3. You can delete any contact in the list by tapping the button with the trash can icon
4. You can also filter the list by name
5. You can also sort the list by selecting the dropdown menu with one of the following option
   • ID (ASC)
   • ID (DESC)
   • Name (A-Z)