UI preview
Before login
Login
Signup
After login
How I build this
frontend
I use nextjs to build this website. It uses tailwindcss and react-beautiful-dnd
react-beautiful-dnd
The concept of using react-beautiful-dnd would be <DragDropContext>, <Droppable>, <Draggable> to control the drag and drop behavior. For more details how to use react-beautiful-dnd, please visit react-beautiful-dnd github.
tailwindcss
just directly visit to the tailwindcss documenation
backend
I deployed the API in serverless architecture. It uses aws api gateway, lambda, dynamodb and graphql
serverless.yml
I have the serverless.yml to help deploy to aws by just run yarn run deploy / serverless deploy.
For serverless framework how to use, please check serverless documenation
Before to use serverless deploy, we need to set the aws credentials in our laptop or by sls command. How to set this, please check serverless github
handler.ts
typeDefs.ts
I need to define the graphql schema like query and mutation API for frontend to use.
resolvers.ts
I need to define the resolvers for different query and mutation and define the response for frontend.
project details
web: trello-clone-omega.vercel.app
api: qtwaxcn004.execute-api.ap-southeast-1.amazo..
github:
github.com/yeukfei02/trello-clone-api
github.com/yeukfei02/trello-clone
another similar project also in my github call singapore-bus-arrival
Thanks for reading this post!
#VercelHashnode
how to contact me
email: yeukfei02@gmail.com
twitter: yeukfei02
github: yeukfei02