Merge pull request #10 from muriukialex/ft/dockerize-app

Dockerizing the web app while maintaining security best practices

.dockerignore

@@ -0,0 +1,26 @@
+# Include files that you wouldn't want included in your container 
+
+**/.classpath
+**/.dockerignore
+**/.env
+**/.git
+**/.gitignore
+**/.vs
+**/.vscode
+**/.next
+**/.cache
+**/*.*proj.user
+**/*.dbmdl
+**/*.jfm
+**/charts
+**/docker-compose*
+**/compose*
+**/Dockerfile*
+**/node_modules
+**/npm-debug.log
+**/obj
+**/build
+**/dist
+LICENSE
+README.md
+**/public/__env.js

CODEOWNERS

@@ -0,0 +1,2 @@
+# These owners will be the default owners for everything in the repo.
+* @muriukialex @effiecancode @Topsideboss2

CONTRIBUTING.md

@@ -0,0 +1,5 @@
+## Contributing Guide
+
+- Fork the application, add your changes and make a [PR/MR](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests)
+
+Contributions are highly welcome!

Dockerfile

@@ -0,0 +1,43 @@
+FROM node:18-alpine as base
+
+WORKDIR /app
+
+COPY package*.json ./
+
+FROM base as builder
+
+WORKDIR /app
+
+COPY . .
+# Install project dependencies
+RUN npm install
+RUN npm run build
+
+FROM base as production
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+# Install only production dependencies
+RUN npm ci --omit=dev
+
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nextjs -u 1001
+
+USER nextjs
+
+# Copy necessary files from builder stage
+COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
+COPY --from=builder --chown=nextjs:nodejs /app/next.config.mjs ./
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.env.local ./.env
+COPY --from=builder /app/entrypoint.sh ./entrypoint.sh
+
+EXPOSE 3000
+
+# specifies the command to run when the Docker image is started 
+ENTRYPOINT ["./entrypoint.sh"]
+

Makefile

@@ -0,0 +1,8 @@
+start-app:
+	docker-compose up
+
+tear-app: 
+	docker-compose down --rmi all
+
+# Phony targets to avoid conflicts with file names
+.PHONY: start-app tear-app

README.md

@@ -1,8 +1,47 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Keep Track of AWS r/Start Labs
+
+- This application is designed to help AWS r/Start students to keep track of their AWS r/Start Labs.
+
+## Overview
+
+### Sign In
+Sign In with Google
+
+![sign-in(light)](https://github.com/muriukialex/aws-rstart-labs/assets/51236424/d185ecd5-0b85-47e4-8a19-8f8d06cd2d1a)
+
+### Track Labs as Completed
+Light Theme Option 
+
+![Screenshot 2024-02-24 192722](https://github.com/muriukialex/aws-rstart-labs/assets/51236424/ddda199b-b43d-42b6-b6ff-e230567c76ac)
+
+Dark Theme Option
+
+
+![Screenshot 2024-02-24 192910](https://github.com/muriukialex/aws-rstart-labs/assets/51236424/c54117b1-8f43-44ba-93ae-918200c8888a)
+
+### Update Lab Completed Status
+
+![Screenshot 2024-02-24 193020](https://github.com/muriukialex/aws-rstart-labs/assets/51236424/e14890c5-acea-41f4-ae2f-92ceb8a68d1a)
 
 ## Getting Started
 
-First, run the development server:
+1. Clone the project
+ ```bash
+ git clone https://github.com/muriukialex/aws-rstart-labs.git
+```
+
+2. Install dependencies
+```bash
+npm install
+```
+
+3. Update your `.env.local` file with your enviroment variables which also includes a [MONGODB_URI](https://www.mongodb.com/basics/mongodb-connection-string#:~:text=How%20to%20get%20your%20MongoDB,connection%20string%20for%20your%20cluster.)
+```bash
+cp .env.example .env.local
+```
+NB: Ensure you update your environent variables before starting the server
+
+3. Run the development server:
 
 ```bash
 npm run dev
@@ -16,21 +55,19 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
+If you are using Docker:
+Ensure you have [make](https://www.gnu.org/software/make/manual/make.html) installed `make --version`
 
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+- Build and run the Docker container
+```bash
+make start-app
+```
 
-## Deploy on Vercel
+- Tear down the Docker container
+```bash
+make tear-app
+```
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## Contributing 
+- See [CONTRIBUTING.md](https://github.com/muriukialex/aws-rstart-labs/main/CONTRIBUTING.md) instructions on how to contribute.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

docker-compose.yml

@@ -0,0 +1,6 @@
+version: "3"
+services:
+  aws-rstart-labs:
+    build: .
+    ports:
+      - "3000:3000"

entrypoint.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+# run npm run start through pm2
+pm2 start npm -- run start
+
+# show logs
+pm2 logs

hooks/useUserLabsData.tsx

@@ -17,16 +17,14 @@ const useUserLabsData = ({ email }: { email?: string | null }) => {
       try {
         const response = await getLabs({ email })
         const responseData = response.data
+        setError(null) // update the error value to null
         setData(responseData)
-        setIsLoading({
-          status: "idle",
-        })
       } catch (error) {
         const errorResponse = error as ErrorResponse
         if (errorResponse) {
           setError(errorResponse)
         }
-
+      } finally {
         setIsLoading({
           status: "idle",
         })