NextJS, Tailwind, AWS, DynamoDB, Cognito & S3
Photo Uploader Tool
This is a free and open source project by me, joemore and consists of 2 repos: Frontend & Backend
The frontend is a NextJS website using TailWindCSS for styling, & the AWS SDK for Authentication with Cognito
The backend is an AWS Serverless stack using AWS SDK V3, TypeScript, DynamoDB, PartiQL, Cognito, S3, & Middy for middleware.
Spin up your own full stack website using this project!
The Frontend System
A NextJS Website using TailwindCSS
The frontend is a NextJS powered application and can be used a boilerplate starting site for your own projects.
I'm not going to lie... the site itself is not exactly the most impressive of piece of tech. You can login and you can upload images into an S3 bucket and that's about it.
However... the point of it is to demonstate how your can deploy a backend system to AWS (See below) and then connect to it using the aws-amplify SDK within NextJS.
I have also added a small tweak to the uploading photos component that does 2 main things:
- Uploaded photos are re-sized by the browser before uploading
- The photos average color is also extracted and stored in the DynamoDB table
I wanted to make this an open source public repo so that others can contribute to it if they feel it can be improved, and I also wanted to have a decent boilerplate example that I can use as my main go-to repository to start any new project from.
NextJS is an absolutely amazing stack (and I know there are some React haters out there) but for a quick and reliable front end framework - it is superb as far as I'm concerned.
TailwindCSS is also my new favorite when it comes to styling, I adore the way I hardly ever have to write CSS stylesheets anymore and can just get on with the job of building the site.
Please enjoy this free open source project, and do let me know if you have suggestions for updates or improvements.
The Backend System
AWS Backend with ServerLess deployment stack
The backend part of this project uses the ServerLess Framework to create a system in AWS that handles the image uploads, saving them to S3 as well as writing them to a DynamoDB table. The backend is written in Typescript and uses Middy to act as middleware for the Lambda functions
DynamoDB: I decided to use DynamoDB as the database for this project, and although I have no preference over other No-SQL databases I do like the fact that DynamoDB is a managed service so is (sort of) quick and easy to setup and get going.
PartiQL: Coming from a traditional SQL background I was keen to use PartiQL for my SELECT, DELETE, UPDATE and INSERT statements in my Lambda functions.
TypeScript: I also wanted to write this backend in TypeScript instead of Javascript, simply because once you get used to TS it is a far superior way of writing JavaScript and helps to identify issues way before they become an actual problem in production
ServerLess Framework: To deploy this stack to AWS I used theServerLess Framework, this is a great tool for deploying ServerLess stacks to AWS and other cloud providers.
Auth: Cognito is used as the authentication system for this project, again being a quick and easy way to get up and running Cognito is perfect for this project.
The Uploaded images are stored into an S3 Bucket using the users UserID and a UUID for the image, the re-sizing of the images is taken care of by the FrontEnd and then saved into folders in the S3 Bucket. This allows the images to be saved with the original filename intact (which arguably isn't required, but something I like to do)
AWS SDK V3: I recently switched over to start using V3 of the AWS SDK for JavaScript, although a bit of a headache to start with I soon got used to the new way of doing things and I now love the modular approach to the SDK. It leaves a much smaller footprint in your code and allows you to only import the parts of the SDK that you actually need.
Finally I made use of Middy to act as middleware for the Lambda functions, this allows me to add some extra schema checking and validation to the functions before they are called. (Although the new AWS SDK has new middleware I'm yet to test out...)
Setup guide
Checkout my blog article which guides you through the setup process to get the backend running on AWS, as well as a frontend you can run locally and test out the Login with Cognito, and uploading photos to S3 and saving to DynamoDB
