This is a full stack application written in TypeScript with Next.js, Chakra UI, and Prisma Client.
The task of this project was to create a web application to understand how ducks are being fed from parks around the word.
A one-to-many relationship is derived from an assumption that for a given park, there would be multiple entries about the food that was fed to the ducks. Static pages are generated for each location where an user could add many entries. A table view is created for the researcher to look at all collected entries.
The technology stack was chosen to create a minimum MVP while minimizing the amount of repetitive CRUD boilerplate. Next.js provides a way to build API routes out of the box, without having to build a separate backend. Prisma is a great tool to quickly model data and offers type safety through autogenerated types. Chakra UI was chosen since has simple to use components with accessibility in mind. SWR was added to provide an real-time user experience.
yarn install
Run the following command to create your SQLite database file. This also creates the Location and Entry tables that are defined in prisma/schema.prisma:
npx prisma migrate dev --name init
Now, seed the database with the sample data in prisma/seed.ts by running the following command:
npx prisma db seed
yarn dev
Open http://localhost:3000 with your browser to explore the UI.