Contact App • UX Studio

Tech stack:

• Frontend with Next.js,
• Backend with Node.js,
• ORM with Prisma,
• Database with SQLite (and PostgresQL)
• Data fetching and caching with react-query
• Object storage with AWS S3
• Animations with framer-motion
• Accessible headless components with @headlessui/react
• Type safety with Typescript
• Styles with Tailwind CSS

Live Demo!

The application was deployed with a @vercel/postgres database on Vercel from the branch deployment-with-postgres.

✨ Go: Contact App • UX Studio

Local development guide

Follow these steps to get the project up and running locally (with SQLite):

Prerequisites

• Node.js installed (version 16.x or higher recommended)
• npm (Node Package Manager) installed
• Git installed

Installation

1. Clone the repository

   Clone this repository to your local machine using the following command:

   git clone https://github.com/nemethricsi/ux-studio-contacts-app.git
   cd ux-studio-contacts-app
   

2. Install Dependencies

   Navigate to the project directory and install the necessary dependencies:

   npm install
   

3. Set Up Environment Variables

   Create a .env file in the root of your project and add the following environment variables.

   DATABASE_URL="file:.db/contact-app.db"
   
   AWS_ACCESS_KEY_ID=
   AWS_SECRET_ACCESS_KEY=
   AWS_REGION=
   S3_BUCKET_NAME=
   

[!WARNING] The values were sent to Bianka by email.

4. Generate Prisma Client

   Run the following command to generate the Prisma client:

   npx prisma generate
   

5. Run Database Migrations

   Use Prisma to create the database schema:

   npx prisma migrate dev --name init
   

6. Run the Development Server

   Start the Next.js development server:

   npm run dev
   

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

You can use Prisma Studio to view and interact with the SQLite database. See more in the Prisma CLI docs.

npx prisma studio

If I had more time...

these are some of the enhancements and features I would prioritize to further improve the application

• Refactor the <DropdownMenu /> to be more modular and reusable across different parts of the application.
• Implement functionality to automatically save unsaved form data to local storage.
• Integrate form state management and validation on the client side. Eg. with react-hook-form.
• Develop unit tests and end-to-end tests (eg. using Playwright to ensure the application functions correctly from the user’s perspective.
• Fix issues in Safari