Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nemethricsi/ux-studio-contacts-app
Homework for UX Studio
https://github.com/nemethricsi/ux-studio-contacts-app
framer-motion nextjs nodejs tailwindcss
Last synced: 4 months ago
JSON representation
Homework for UX Studio
- Host: GitHub
- URL: https://github.com/nemethricsi/ux-studio-contacts-app
- Owner: nemethricsi
- Created: 2024-08-27T11:15:59.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-30T07:30:17.000Z (5 months ago)
- Last Synced: 2024-09-27T18:02:08.294Z (4 months ago)
- Topics: framer-motion, nextjs, nodejs, tailwindcss
- Language: TypeScript
- Homepage: https://ux-studio-contact.vercel.app
- Size: 635 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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`](https://github.com/nemethricsi/ux-studio-contacts-app/tree/deployment-with-postgres).
✨
Go: [Contact App • UX Studio](https://ux-studio-contact.vercel.app)
---
## 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:
```bash
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:
```bash
npm install
```
3. **Set Up Environment Variables**
Create a `.env` file in the root of your project and add the following environment variables.
```bash
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:
```bash
npx prisma generate
```
5. **Run Database Migrations**
Use Prisma to create the database schema:
```bash
npx prisma migrate dev --name init
```
6. **Run the Development Server**
Start the Next.js development server:
```bash
npm run dev
```
✨
Open [http://localhost:3000](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](https://www.prisma.io/docs/orm/reference/prisma-cli-reference).
```bash
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 `` 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`](https://react-hook-form.com/).
- Develop unit tests and end-to-end tests (eg. using [`Playwright`](https://playwright.dev/) to ensure the application functions correctly from the user’s perspective.
- Fix issues in Safari