Added: README.md, minor optimizations

Author: ironexdev

.env.example

@@ -1,6 +1,6 @@
 NODE_ENV=development
 AWS_S3_REGION=us-east-1
-AWS_S3_BUCKET_NAME=<REPLACE THIS>
-AWS_ACCESS_KEY_ID=<REPLACE THIS>
-AWS_SECRET_ACCESS_KEY=<REPLACE THIS>
-AWS_CLOUDFRONT_DISTRIBUTION=<REPLACE THIS>
+AWS_S3_BUCKET_NAME=your-bucket-name
+AWS_ACCESS_KEY_ID=key
+AWS_SECRET_ACCESS_KEY=secret
+AWS_CLOUDFRONT_DISTRIBUTION=abcdef12345678.cloudfront.net

README.md

@@ -1 +1,51 @@
-# Asset Uploader
+# S3 Asset Uploader with Sharp optimization
+
+Simple S3 image asset uploader with Sharp optimization. It is very simple and barebones, but it does the job.
+- In future I plan to extend this to also support videos and documents.
+
+Run it on localhost to optimize and upload images to S3. Retrieved links of uploaded images point to Cloudfront and can be used in production.
+
+## Preview
+<img src="assets/preview.png" alt="App Preview" width="800"/>
+
+## Pre-requisites
+
+1) Setup S3 bucket with Cloudfront distribution in front of it. This app returns Cloudfront links after you upload the image. [This video](https://www.youtube.com/watch?v=kbI7kRWAU-w) can help you with that.
+2) Create IAM user with following policy (replace "your-bucket-name" with your actual bucket name)
+```
+{
+    "Version": "2012-10-17",
+    "Statement": [
+        {
+            "Effect": "Allow",
+            "Action": [
+                "s3:GetObject",
+                "s3:PutObject",
+                "s3:ListBucket"
+            ],
+            "Resource": [
+                "arn:aws:s3:::your-bucket-name",
+                "arn:aws:s3:::your-bucket-name/*"
+            ]
+        }
+    ]
+}
+```
+
+## How to setup
+1) Download or git clone this repo
+2) Create .env file based on .env.example and place it in the root of the project
+    - The region needs to be us-east-1 for Cloudfront to work (it is global, but according to AWS it has to be configured in us-east-1)
+3) Run `npm run install` or `yarn install` or `pnpm install` (I use pnpm, but other package managers should work too)
+4) Run `npm run dev` or `yarn dev` or `pnpm dev` to start the server
+5) Open your browser and go to `http://localhost:3010`
+
+## How to use
+1) **Run it on localhost** <small>(npm run dev)</small>
+- <small>#1 Optimization Form</small>
+2) **Select image from filesystem**
+3) **Fill in quality and size** <small>(at least height or width has to be filled in, Sharp will calculate the other parameter automatically)</small>
+4) **Click optimize** <small>-> optimized image will be previewed in the Upload Form</small>
+- <small>#2 Upload Form</small>
+5) **Fill in the new image name** (technically S3 namespace) <small>-> it will be automatically prefixed with assets/images/</small>
+6) **Click upload** <small>-> image will be uploaded to S3 bucket and Cloudfront link will be returned</small>

assets/preview.png

@@ -1,10 +1,10 @@
 {
-  "name": "asset-uploader-frontend",
-  "version": "0.1.0",
+  "name": "asset-uploader",
+  "version": "1.0.0",
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3010",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -31,6 +31,5 @@
     "prettier-plugin-tailwindcss": "^0.6.6",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
-  },
-  "packageManager": "[email protected]"
+  }
 }

package.json

@@ -19,7 +19,6 @@ export async function GET() {
     };
 
     const data = await s3Client.send(new ListObjectsV2Command(params));
-    console.log(data);
     const objects = data.Contents
       ? data.Contents.map((item) => {
           const sizeInKB =

src/app/api/objects/route.ts

@@ -24,23 +24,25 @@ export default function Home() {
 
   return (
     <main className="flex w-full justify-center py-[20px]">
-      <div className="flex w-[1680px] justify-between">
-        <div className="w-[400px]">
-          <ImageOptimizeForm
-            key={resetKey} // Reset form when key changes
-            setPreviewUrl={setPreviewUrl}
-            setImageInfo={setImageInfo}
-          />
-        </div>
-        <div className="w-[400px]">
-          <ImageUploadForm
-            previewUrl={previewUrl}
-            imageInfo={imageInfo}
-            onReset={handleReset} // Call handleReset after upload
-          />
-        </div>
-        <div className="w-[800px]">
-          <ObjectList />
+      <div className="flex w-full max-w-[1680px] justify-center px-[20px]">
+        <div className="flex w-full max-w-[1640px] gap-[20px]">
+          <div className="w-[400px] flex-shrink-0">
+            <ImageOptimizeForm
+              key={resetKey} // Reset form when key changes
+              setPreviewUrl={setPreviewUrl}
+              setImageInfo={setImageInfo}
+            />
+          </div>
+          <div className="w-[400px] flex-shrink-0">
+            <ImageUploadForm
+              previewUrl={previewUrl}
+              imageInfo={imageInfo}
+              onReset={handleReset} // Call handleReset after upload
+            />
+          </div>
+          <div className="min-w-[400px] max-w-[800px] flex-grow">
+            <ObjectList />
+          </div>
         </div>
       </div>
     </main>