Submitted 11 months ago

Frontend Feedback App | by MV ( Next.js - postgreSQL )

next, postgres, tailwind-css, jest

Marcos Valenzuela•710

@Dantalian5

A solution to the Product feedback app challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

This project was developed using Next, Tailwind, and Postgres (PRISMA). While I tried to maintain the original idea offered by Frontend Mentor, as I progressed towards a more developed and functional full-stack application, I had to change certain aspects of the application, as well as add certain functionalities that wouldn’t exist otherwise. I am proud of how I used Next’s Server Actions to replace the use and creation of an API, as well as the integration with Postgres and the handling of data in the database. Special attention was also paid to accessibility and responsiveness.

What challenges did you encounter, and how did you overcome them?

The configuration of authv5 was especially difficult, mainly because it forced me to switch from using Postgres directly to using Prisma (due to issues with the edge runtime and certain modules that the pg library used). Additionally, not involving an API made it challenging to adapt the way form behaviors and data loading were handled at the beginning. Also, to avoid radically changing the behavior and original data provided in the project, some actions are executed with a bit of ‘brute force’ to mitigate certain behaviors that would conflict with the new additions as a full-stack project. And, of course, naming things

What specific areas of your project would you like help with?

All help, feedback , advice, and critiques are welcome! Especially regarding the authorization and database management parts. :)

Code

Please log in to post a comment

Community feedback

BrunoMoleta•700
@brunomoleta
Posted 11 months ago
Ciao Marcos,

I forked you repo locally, and the first issue that I ran was:

after setting the local DATABASE_URL at .env, running prisma generate and starting the app, The moment where you try to register an account, the app returns:
```
ClientFetchError: There was a problem with 
the server configuration. Check the server 
logs for more information. 
Read more 
at [https://errors.authjs.dev#autherror]
(https://errors.authjs.dev/#autherror)
```
Which ends up at the page: http://localhost:3000/api/auth/error

Good job setting this error page, because it's not rare that people don't think about the case where the server is off.

I want to know how you went about this integration with the server. It feels strange for a "normal dev" in the sense that when I saw the error, I wanted to test the API at Postman, but then I read the code a bit more and noticed that it's all Next.js. I did not know this was possible.

So please explain how this integration works if you'd like.
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord