Tech stack:
Next.js
,Node.js
,Prisma
,SQLite
(and PostgresQL
)react-query
AWS S3
framer-motion
@headlessui/react
Typescript
Tailwind CSS
The application was deployed with a @vercel/postgres
database on Vercel from the branch deployment-with-postgres
.
✨ Go: Contact App • UX Studio
Follow these steps to get the project up and running locally (with SQLite
):
Node.js
installed (version 16.x or higher recommended)npm
(Node Package Manager) installedClone 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
Install Dependencies
Navigate to the project directory and install the necessary dependencies:
npm install
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.
Generate Prisma Client
Run the following command to generate the Prisma client:
npx prisma generate
Run Database Migrations
Use Prisma to create the database schema:
npx prisma migrate dev --name init
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
these are some of the enhancements and features I would prioritize to further improve the application
<DropdownMenu />
to be more modular and reusable across different parts of the application.local storage
.react-hook-form
.Playwright
to ensure the application functions correctly from the user’s perspective.