|
|
@@ -1,34 +1,53 @@
|
|
|
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
|
|
+# Prisma Home Challenge
|
|
|
+
|
|
|
+This is my take on Prisma's Home Challenge.
|
|
|
+
|
|
|
+This is a [Next.js](https://nextjs.org/) project made in [Typescript](https://www.typescriptlang.org/) and bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
|
|
+
|
|
|
+## Architecture
|
|
|
+
|
|
|
+For an application like this, my candidates were
|
|
|
+
|
|
|
+- Create React App: Easy to set up, but really heavyweight in terms of dependencies.
|
|
|
+- Vite: Really fast CRA alternative, but also very minimalistic. I would had to spend time working on routing and other configurations.
|
|
|
+- Gatsby & Next.js: SSG and routing comes out of the box, very handy for an app like this.
|
|
|
+
|
|
|
+So based on this, my two top candidates were Gatsby & Next.js, I decided to go with Next.js because of personal preference :)
|
|
|
+
|
|
|
+as a side note the api doesn have cors configured correctly, so i couldnt query directly from fe, and for the challenge i set up a proxy to bypass this
|
|
|
+Aside from my reasons of choosing Next.js, I ended up creating a proxy for the API, since every request from a client application to `https://prisma-fe-dev-assignent.vercel.app/api/` was blocked by CORS policy (this was a workaround to get the API working).
|
|
|
+
|
|
|
+I added the option to choose between the original API or the proxy: adding the env variable `NEXT_PUBLIC_API=https://prisma-fe-dev-assignent.vercel.app/api` would make the client application to use the original backend instead of using proxy.
|
|
|
+
|
|
|
+I also used [TailwindCSS](https://tailwindcss.com) to speed up the development process.
|
|
|
|
|
|
## Getting Started
|
|
|
|
|
|
-First, run the development server:
|
|
|
+First, create a `.env.local` file with the contents of `.env.example`
|
|
|
+
|
|
|
+Then run the development server:
|
|
|
|
|
|
```bash
|
|
|
-npm run dev
|
|
|
-# or
|
|
|
yarn dev
|
|
|
```
|
|
|
|
|
|
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
|
|
|
|
|
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
|
|
|
-
|
|
|
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
|
|
|
-
|
|
|
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
|
|
|
-
|
|
|
-## Learn More
|
|
|
-
|
|
|
-To learn more about Next.js, take a look at the following resources:
|
|
|
+## Feedback on the API
|
|
|
|
|
|
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
|
|
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
|
+There are a couple of things that I would do differently if I could change the API:
|
|
|
|
|
|
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
|
|
+1. Change CORS policy to allow fetch by any origin (only because this is a public API)
|
|
|
+2. Improve responses:
|
|
|
+ a. Server should return client error responses (40X) if the data was invalid, not 500 (Server error response).
|
|
|
+ b. It would be nice if `/login` endpoint returns user data instead of just a message
|
|
|
+ c. Double check message content (there was a tiny typo in the failed response for `/login`)
|
|
|
+ d. I would change the result of `/user/{id}` to return a user with an `id: int` instead of `id: string` to keep consistency with the other endpoints.
|
|
|
|
|
|
-## Deploy on Vercel
|
|
|
+## Improvements
|
|
|
|
|
|
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
|
|
+I would improve the UX of the application:
|
|
|
|
|
|
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
|
|
+- Better handling of form states (error message doesn't dissapear until new submission )
|
|
|
+- Do not resend data if the form inputs didn't change
|
|
|
+- Customize inputs to use personalised messages and validations.
|
