Sample Contact App

This is a sample project for a simple React-driven contact list app.

This is a Next.js project bootstrapped with create-next-app.

Security

No public access to the app is permitted. Users must be authorized.

This app uses next-iron-session to authorize users. Under the hood, it uses @hapi/iron, which is very similar to an encrypted JWT.

Encapsulated backend API. Since the business requirements are so simple, creating something like an ASP.NET Web API would be overkill.
API provides a list of persons, including the following info:
- Name – first, middle, last, suffix (e.g., Jr., Sr., III)
- Date of Birth – display as m/d/yyyy
- Addresses – one to many relationship; i.e. home, mailing, work
- Email Address
  - Adds an extra "IsValid" column to the grid that says if the Email Address is valid or not, according to standard email address validation rules.
The fronted displays that info in a table.
- The table supports paging and sorting.
- The table supports filtering on Date of Birth using “From” and “To” dates.

npm install
npx prisma generate

Create a .env.local file:

SECRET_COOKIE_PASSWORD=<some secret key>

NOTE: Your secret key must be at least 32 characters long!

By default, there is only one user, admin, with the password monsoon.

To create a new user, unfortunately, you'll have to insert it into the database manually.

You can run the scripts/hash_password.ts file to create a password hash.

e.g.:

npx ts-node scripts/hash_password.ts monsoon

npm run dev

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

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

npm run start