Full Stack App with NextJS & GraphQL & AWS S3

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

What did I learned

• CRUD with GraphQL in Server Side and Client Side
• Build up SQLite with drizzle-orm
• Image Upload with aws-sdk
• Presigned URL with aws-sdk
• Drag and Drop with dnd-kit

Process

1.【FE】 Create Pages and setting styles for front-end:

• setting tailwind.config.ts
• create components (form/ dropdown/ etc)
• create pages (login/ register/ profile/ etc)
• build up drop and drag component with dnd-kit

2. 【BE】 Create GraphQL schema and mutation for backend:

• create /api/graphql/schema.ts
• create /api/graphql/resolver.ts
• create /api/graphql/route.ts -- connect graphql to Apollo Server
• 【FE】setup client side @urql/next

3. 【BE】 Create schema for database and connect to TURSO with dirzzle-orm: > Detail to the topic: https://orm.drizzle.team/learn/tutorials/drizzle-with-turso

• create /api/db/index.ts
• create /api/db/schema.ts

then run:

npm run db:gen
npm run db:push

4. 【FE】 Finish register and login & CRUD for profile

   > the process is using useQuery and useMutation from @urql/next

5. 【BE】 Upload image to S3 and save to database > the process is using aws-sdk to upload image to S3 > Since form-data is restricted by GraphQL, create API route by nextjs instead.

• Setup User in S3, reference: https://conermurphy.com/blog/presigned-urls-nextjs-s3-upload

Useful resources

1. 【Youtube】Storing Images in S3 from Node Server
2. 【Frontend Master】Server-Side GraphQL in Next.js
3. 【DOC】drizzle-orm
4. 【DOC】dnd-kit
5. 【DOC】@urql/next

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

1. GraphQL 's data is restricted in NextJS, some unexpected error comes up in server or CRUD => read doc more frequently, e.g. :

• 【DOC】drizzle-orm
• 【DOC】dnd-kit
• 【DOC】@urql/next

2. First time to try up DB by myself!

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

1. Wondering how to deal with form more efficiency in React.
2. Any Feedback is welcome :D