Kudos App
May 24, 2023
Kudos is a mobile-first, full-stack web application that allows users to create, send, and share kudos with each other in a casual and interesting way. This application is built using MERN stack plus Next.js and deployed on Vercel.
URL: https://kudos-clone.vercel.app/
GitHub: https://github.com/siranchao/kudos
Tech stack
This application is built on MERN stack and primarily use Next.js as production framework. Utilize Next.js to handle server-side rendering, page routing, and SEO optimization e.g. In the API layer, I created a separate server application using Node and express.js. The server is responsible for handling REST API and manage user & application data in MongoDB. (see Kudos API repo)
Here are the tech stacks and tools used in this project:
- Front-end: React, Next.13, Material UI, Jotai, Next-Auth
- Back-end: TypeScript, Express.js, Node, MongoDB, Mongoose, JWT
- Deployment: Vercel, Cyclic
A little background
This application was inspired by one of the project I've done during my coop at Ontario Government. The purpose of the project was to build a light-weight web app to create an online community for OPS(Ontario Public Servant) employees to send and share their kudos. No need to compose formal and tedious emails. The original app was built using MERN and Gatsby.js and currently in production. The new Kuods is a clone with latest Next.js and additional features.
Features
Here are some of the features:
- - Support Google OAuth and custom credentials for login
- - Anonymous user can view, search and share Kudos
- - Kudos and Gif info are specified
- - Logged-in user can send, like and collect specific Kudo
- - Receiver's name are auto-completed
- - Auto display trending Gifs, also support keyword search
- - Users can receive email notifications (only available on OPS version)
Additional info
All Gif images used in this app are fetched from Giphy API, you can learn more on Giphy developer documentation
Demo Account:
Email: demo@gmail.com
Password: 123demo