Chen develop

.gitignore

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

README.md

@@ -1,48 +1,95 @@
-# [your app name here]
+# ReadRave
 
 CodePath WEB103 Final Project
 
-Designed and developed by: [your names here]
+Designed and developed by: Xujuan Chen & Yevheniya Solomyana
 
 🔗 Link to deployed app:
 
 ## About
 
 ### Description and Purpose
 
-[text goes here]
+ReadRave is a vibrant and engaging platform designed for book enthusiasts of all backgrounds. Whether you're an avid reader, a casual book lover, or simply someone in search of your next great read, ReadRave is the go-to destination to connect, share, and explore the wonderful world of literature. With ReadRave, you can discover new books, express your thoughts through reviews, and connect with fellow book lovers who share your passion for reading.
+
+1. **Book Discovery**: ReadRave is your personal literary guide, helping you discover new books across a wide range of genres. Explore book recommendations and reviews from like-minded readers to find your next captivating read.
+
+2. **Share Reviews**: Express your thoughts and opinions about books you've read through detailed reviews. Help others make informed decisions and share your insights about the books you love.
+
+3. **Community Connection**: Connect with fellow book enthusiasts from around the world. Share your reading experiences, engage in discussions, and build connections with readers who share your interests.
+
+4. **Reader Ratings**: Access comprehensive book ratings and reviews to help you make informed decisions when selecting your next book. Contribute to the community by rating books you've read.
 
 ### Inspiration
 
-[text goes here]
+ReadRave was born out of a deep-seated love for books and the shared belief that reading is not a solitary act, but a voyage that becomes even more enriching when experienced together. Our inspiration for this app stems from the profound impact that literature has on our lives and the communities it creates.
+
+The beauty of a good book lies not only in its pages but in the conversations, connections, and emotions it sparks. It's about the shared exhilaration of discovering an enthralling plot, the thrill of delving into a thought-provoking story, and the warmth of discussing beloved characters with others who understand.
+
+Join us on this extraordinary literary expedition, where the inspiration is the love of reading, and the destination is an ever-expanding world of stories and connections. Welcome to ReadRave, where books inspire, and readers unite.
 
 ## Tech Stack
 
-Frontend:
+Frontend: React.js
 
-Backend:
+Backend: Express, PostgreSQL
 
 ## Features
 
-### [Name of Feature 1]
+### Baseline Features 
+Complete all of the baseline features. These features use the core skills developed in this course, including designing a database schema, creating a server, and connecting a frontend to the server.
+
+- [✅] The web app includes an Express backend app and a React frontend app. 
+- [✅] The web app includes dynamic routes for both frontend and backend apps. 
+- [ ] The web app is deployed on Railway with all pages and features working.
+
+Backend Features
+
+- [✅] The web app implements at least one of each of the following database relationships in Postgres:
+    - [ ] one-to-many 
+    - [✅] many-to-many with a join table 
+- [✅] The web app implements a well-designed RESTful API that:
+    - [✅] Can respond to at least one of each type of request: GET, POST, PATCH, and DELETE.
+    - [✅] Implements proper naming conventions for routes.
+- [✅] The web app implements the ability to reset the database to its default state. 
+
+
+Frontend Features
+
+- [✅] The web app implements at least one redirection. 
+- [✅] The web app implements at least one interaction that the user can initiate and complete on the same page without navigating to a new page.
+- [✅] The web app uses dynamic frontend routes created with React Router. 
+- [✅] The web app uses hierarchically designed React components:
+    - [✅] Components are broken down into categories, including page and component types. 
+    - [✅] Corresponding container components and presenter components as appropriate.
+
+
+### Custom Features
+
+Choose two custom features to include in your app. These features will make your app stand out with a more custom look and functionality.
+
+- [✅] The web app allows filtering and/or sorting as appropriate for your use case.
+- [ ] Data submitted via a POST or PATCH request is validated before the database is updated.
+
+
+## Video Walkthrough
 
-[short description goes here]
+Here's a walkthrough of implemented required features:
 
-[gif goes here]
 
-### [Name of Feature 2]
 
-[short description goes here]
+![reviewbook](https://github.com/XujuanChen/web103_finalproject/assets/109524796/b493a1e4-a02e-4d0f-af88-ee023ff02aeb)
 
-[gif goes here]
 
-### [Name of Feature 3]
 
-[short description goes here]
 
-[gif goes here]
+<!-- Replace this with whatever GIF tool you used! -->
+GIF created with ...  GIF tool here
+<!-- Recommended tools:
+[Kap](https://getkap.co/) for macOS
+[ScreenToGif](https://www.screentogif.com/) for Windows
+[peek](https://github.com/phw/peek) for Linux. -->
 
-### [ADDITIONAL FEATURES GO HERE - ADD ALL FEATURES HERE IN THE FORMAT ABOVE; you will check these off and add gifs as you complete them]
 
 ## Installation Instructions
 

client/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

client/.gitignore

@@ -0,0 +1,24 @@
+# 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?

client/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

client/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>ReadRave</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>