Tidak Ada Deskripsi

0 Rilis

Tatiana Inama 0b8e4ce324 Update README with live version		4 tahun lalu
components	08be147b57 Add prisma logo	4 tahun lalu
context	73d9cc203c UI touch-ups	4 tahun lalu
hooks	73d9cc203c UI touch-ups	4 tahun lalu
pages	08be147b57 Add prisma logo	4 tahun lalu
public	08be147b57 Add prisma logo	4 tahun lalu
styles	73d9cc203c UI touch-ups	4 tahun lalu
utils	73d9cc203c UI touch-ups	4 tahun lalu
.env.example	a098677dca Add README and env sample file	4 tahun lalu
.eslintrc.json	08be147b57 Add prisma logo	4 tahun lalu
.gitignore	bb712407f5 Initial commit from Create Next App	4 tahun lalu
.prettierignore	c0307ad66f Add & run Prettier	4 tahun lalu
.prettierrc.json	c0307ad66f Add & run Prettier	4 tahun lalu
README.md	0b8e4ce324 Update README with live version	4 tahun lalu
app.d.ts	d54d36b128 Add PrivatePages Component	4 tahun lalu
next-env.d.ts	bb712407f5 Initial commit from Create Next App	4 tahun lalu
next.config.js	c0307ad66f Add & run Prettier	4 tahun lalu
package.json	b1b7f18e9c Introduce Login page	4 tahun lalu
postcss.config.js	c0307ad66f Add & run Prettier	4 tahun lalu
tailwind.config.js	73d9cc203c UI touch-ups	4 tahun lalu
tsconfig.json	437766db42 Refactor	4 tahun lalu
yarn.lock	b1b7f18e9c Introduce Login page	4 tahun lalu

Prisma Home Challenge

This is my take on Prisma's Home Challenge.

This is a Next.js project made in Typescript and bootstrapped with 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 :)

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 to speed up the development process.

Getting Started

First, create a .env.local file with the contents of .env.example

Then run the development server:

yarn dev

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

Live version

You can also find a live version here

Feedback on the API

There are a couple of things that I would do differently if I could change the API:

Change CORS policy to allow fetch by any origin (only because this is a public API)
Improve responses:
- Server should return client error responses (40X) if the data was invalid, not 500 (Server error response).
- It would be nice if /login endpoint returns user data instead of just a message
- Double check message content (there was a tiny typo in the failed response for /login)
- 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.

Improvements

I would improve the UX of the application:

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.

README.md