Sheng kai Reflection Section

README.md

@@ -1,48 +1,86 @@
-# [your app name here]
+# Cameo Clone
 
 CodePath WEB103 Final Project
 
-Designed and developed by: [your names here]
+Designed and developed by: Sheng-Kai Wen, Bao Ngoc Nguyen, Christian Michael Dela Cruz
 
 🔗 Link to deployed app:
 
 ## About
 
 ### Description and Purpose
 
-[text goes here]
+The project aims to create an interactive website for users to purchased videos from their favorite celebrities, content creators, etc. The platform will serve for 3 main types of users: normal users, celebrities, and administrations. Normal users can sign up and log in to the website to see all of the interative videos that their favorite content creators have. Celebrities can upload their video through the website, make their own introduction, and chose which video they would have as private videos, so only subscribed users are permitted to watch the videos. Normal users are allowed to leave comments and reviews for the videos. Admin roles can manage all users and celebrities, and change the account type from user to celebrity if the person is a real celebrity. Admin also manage a healthy and fair space on Cameo Clone so that all users and celebrities can have a good time using the app!
+
+Our platform allows you to order personalized video messages from your favorite celebrities, offering a unique and heartfelt way to connect with those you care about.
 
 ### Inspiration
 
-[text goes here]
+As the year ends, it's the perfect time to express gratitude and celebrate special moments with loved ones. Our platform allows you to order personalized video messages from your favorite celebrities, offering a unique and heartfelt way to connect with those you care about. Whether it's for a birthday, holiday, or just to make someone's day, these customized messages create lasting memories, making every occasion more meaningful and unforgettable. With an easy-to-use interface and a wide selection of celebrities, you can give a truly thoughtful gift that speaks from the heart.
 
 ## Tech Stack
 
-Frontend:
+Frontend: React, Javascript
 
-Backend:
+Backend: NodeJS, Express, Railway
 
 ## Features
 
-### [Name of Feature 1]
+### Authentication
+
+[ ] User can sign in or Sign up through the webpage authentication stage. If the user forgot their password, they can request a renew password email through their email address.
+
+### Admin:
+
+[ ] Approve (edit the user state) the creation of a celebrity account.
+
+[ ] Delete and flag content that violates the code of conduct
+
+### User Profile Pages (Purchased Customer)
+
+[ ] Purchased account to view purchased content
+
+[ ] Add a review or comments on the page
+
+[ ] Delete/Edit the review or comments that they made
+
+### User Profile Pages (Non-Purchased Customer)
+
+[ ] View default videos that celebrities allow
+
+[ ] Read through comments that purchased users have
+
+### Celebrity
+
+[ ] Add (POST) videos onto the main page and add the title and introduction
+
+[ ] Delete (DELETE) videos that they post
+
+[ ] Edit (PUT) videos and edit the title and introduction
+
+[ ] Add/Edit the price of the account
+
+### Purchase request
+
+[ ] Form to fill in the form to submit an order
 
-[short description goes here]
+[ ] Update or cancel the order before the celebrity accepts the request.
 
-[gif goes here]
+## Additional features
 
-### [Name of Feature 2]
+### Filter
 
-[short description goes here]
+[ ] Celebrity’s category
 
-[gif goes here]
+[ ] Video types (Birthday, Roast, Pep talk, and etc)
 
-### [Name of Feature 3]
+[ ] Price range
 
-[short description goes here]
+### Sorting
 
-[gif goes here]
+[ ] User’s reviews
 
-### [ADDITIONAL FEATURES GO HERE - ADD ALL FEATURES HERE IN THE FORMAT ABOVE; you will check these off and add gifs as you complete them]
+[ ] Price
 
 ## Installation Instructions
 

frontend/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+node_modules

frontend/README.md

@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

frontend/eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>