Merge pull request #18 from BCIT-SSD-2020-21/17UserProfie

17 user profie
BCIT-SSD-2020-21 · Apr 17, 2021 · 9ddf37e · 9ddf37e
2 parents 87bcc03 + 25b2725
commit 9ddf37e
Show file tree

Hide file tree

Showing 12 changed files with 57 additions and 127 deletions.
diff --git a/README.md b/README.md
@@ -1,59 +1,30 @@
-# A Passion Project 
-by Jianming Tu
+# Paws Lost and Found 
+by Jianming Tu https://eloquent-archimedes-c44224.netlify.app 
 
+## Description
+This is a web app for finding the lost pets or the owner who lost pets. The app provides the user authentication and authorization for creating a post of lost or find; provides a searching engine for easily narrowing down the need.
 
-## Overview
-The goal of the Passion Project module is to provide each student with an opportunity to individually explore and expand their abilities within a hands-on project-based setting.
+## Tech Stack
+    use react, express and mongodb, deploying on netlify(front end app), Heroku(Node express) and mongoDB altas and save the images on AWS s3 bucket, using React, Bootstrap, Material-ui, font-awesome
 
-The student will perform all roles including:
-* Product Owner
-* Product Designer/Planner
-* Project Manager
-* Designer
-* Dev Ops
-* Developer
+## Deployed on Netlify 
+    https://eloquent-archimedes-c44224.netlify.app/
 
-Students are encouraged to work independantly (or in small groups of 2 or 3 if there is a shared passion). 
+## Deployed on Heroku
+    https://fathomless-lake-61399.herokuapp.com/api
 
-Students are able to use the tech stack of their choice. 
-
-## Outcomes
-Leading up to this point in our program you were asked to plan, design, and start to develop a product of your choosing. Given your increased experience with web and mobile technologies, you will be provided with class time to perform the tasks necessary to result in the following:
-
-* A deployed main branch of any web based project assets.
-* A clearly defined document with installation instructions as well as links and descriptions for all project assets.
-* A project board that shows all of your build activitites (GitHub Project, Trello, etc.)
-* A 5 minute presentation of the primary use cases for your application.
-
-## Process
-* Review your original product plan and design.
-* Make changes to your plan/design where necessary to ensure that you can have a completed product for the Passion project demo day.
-* Set specific milestones for your project, this will help to ensure that primary use cases are built in priority sequence and functional to a required minimum. (Not all milestones need to be completed...)
-* All commits are to be done on a branch other than main and connected to a GitHub "issue". If working alone you can review and merge your own pull requests.
-
-## Essential Features
-These are really based on the design of your application and up to you...The only requirements are that each application has:
-* some form persistant data that requires a database
-* an implementation of a user interface that appropriately ties the app to the persisted data.
-
-All other features should be included on an as needed basis for your application.
-
-## Due Date and Grading
-Presentations will take place 1pm-4pm PST April 16th, 2021.
-
-The due date for graded code to be on GitHub is 11:59pm April 18th, 2021.
-
-The passion project accounts for 20% of your SSDP5001 mark. 
+## App Layers
+client - React (Netlify)
+server - Express (Heroku)
+database -MongoDB
 
-**SSDP5001 Weighting**
-* Career Success Series (13.33%)
-* Passion Project (20%)
-* Industry Project (66.67%)
+## Server Installation
+https://github.com/BCIT-SSD-2020-21/passion-project-jianmingtu/tree/main/client
 
+## Server Installattion
+https://github.com/BCIT-SSD-2020-21/passion-project-jianmingtu/tree/main/server
 
-## App Layer
-client - React (Netlify)
+## User Experience
+![](https://i.imgur.com/sW2ter8.png)
+![](https://i.imgur.com/88agZx5.png)
 
-server - Express (Heroku)
-
-database -MongoDB
diff --git a/client/README.md b/client/README.md
@@ -1,4 +1,4 @@
-# Getting Started with Create React App
+# Client Side Install, Debug and Deployment
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
@@ -68,3 +68,7 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
 ### `yarn build` fails to minify
 
 This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+
+## Debug
+    NPM start -> Copy URL
+    CTRL+SHIFT+D -> Select Debug URL -> Paste the copied URL -> it will run to debugging breakpoints
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png
diff --git a/client/src/components/navbar/Navbar.js b/client/src/components/navbar/Navbar.js
@@ -8,20 +8,22 @@ const Navbar = ({ sidebarOpen, openSidebar, user }) => {
         <i className="fa fa-bars" aria-hidden="true"></i>
       </div>
       <div className="navbar__left">
-        <a href="#">Subscribers</a>
+        <a href="#">Admin</a>
+         <a href="#">PawsBlog</a>
+          <a href="#">PawsStore</a>
         <a className="active_link" href="#">
-          Admin
+          Lost & Found
         </a>
       </div>
       <div className="navbar__right">
         <a href="#">
-          <i className="fa fa-search" aria-hidden="true"></i>
+          <span>{user && user.username}</span>
         </a>
         <a href="#">
           <i className="fa fa-clock-o" aria-hidden="true"></i>
         </a>
         <a href="#!">
-          <img width="30" src={avatar} alt="avatar" />
+          <img width="30" src={(user && user.avatar)?user.avatar:avatar} alt="avatar" />
         </a>
       </div>
     </nav>

diff --git a/client/src/components/postDetails/index.js b/client/src/components/postDetails/index.js
@@ -149,11 +149,14 @@ export default function PostDetails({user, className, post, submitPost, submitCo
 						</select>	
 					</div>				
 				</div>	
-
-				<button className="submitButton" disabled = {user.username ==post.user.username?false:true}>
-					<BsForward style={{marginRight: '0.5rem'}} size={30} />
-					<span>Update Paw</span>
-				</button>
+
+				{
+					user && user.username == post.user.username	&&
+					<button className="submitButton">
+						<BsForward style={{marginRight: '0.5rem'}} size={30} />
+						<span>Update Paw</span>
+					</button>
+				}
 			</form>	
 		</div>
 	);

diff --git a/client/src/components/posts/Posts.js b/client/src/components/posts/Posts.js
@@ -26,7 +26,7 @@ const Posts = ({posts, cardClicked}) => {
                     <a href="#" className={`card-post__category badge badge-pill ${Badge(post.lost)} `}>{post.lost?'LOST':'FOUND'}</a>
                     <a href="#" className={`card-post__more badge badge-pill badge-primary `}  onClick={()=>history.push(`/post/${post._id}`)} >More</a>
                     <div className="card-post__author d-flex">
-                      <a href="#" className="card-post__author-avatar card-post__author-avatar--small" style={{backgroundImage: `url('images/avatars/avatar.png')`}} >Written by {post.username}</a>
+                      <a href="#" className="card-post__author-avatar card-post__author-avatar--small" style={{backgroundImage: `url(${post.user.avatar?post.user.avatar: ""})`}} >Written by {post.username}</a>
                     </div>
                   </div>
                   <div className="card-body" style={{paddingBottom: 0}}>

diff --git a/client/src/components/sidebar/Sidebar.js b/client/src/components/sidebar/Sidebar.js
@@ -9,8 +9,6 @@ const Sidebar = ({ sidebarOpen, closeSidebar, user, setUserFunc }) => {
 
     const history = useHistory()
 
-    const text =
-        "Lorem ipsum dolor sit amet consectetur adipisicing elit.Nihil earum illo ipsa velit facilis provident qui eligendi, quia ut magnam tenetur. Accusantium nisi quos delectus in necessitatibus ad. Ducimus, id!";
     const [collapse, setCollapse] = useState(true);
 
     const [icon, setIcon] = useState("fa fa-chevron-right");   
@@ -20,7 +18,6 @@ const Sidebar = ({ sidebarOpen, closeSidebar, user, setUserFunc }) => {
       <div className="sidebar__title">
         <div className="sidebar__img">
           <img src={logo} alt="logo" />
-          <h1>Codersbite</h1>
         </div>
         <i
           onClick={() => closeSidebar()}
@@ -35,7 +32,7 @@ const Sidebar = ({ sidebarOpen, closeSidebar, user, setUserFunc }) => {
           <i className="fa fa-home"></i>
           <Link to="/" exact>Dashboard</Link>
         </div>
-        <h2>MNG</h2>
+        <h2>Lost and Found</h2>
         {/* <div className="sidebar__link">
           <i className="fa fa-user-secret" aria-hidden="true"></i>
           <Link to="/posts" exact>Search Paws</Link>

diff --git a/client/src/index.css b/client/src/index.css
@@ -64,7 +64,7 @@ body {
   background-color: #E5E5E5;
   display: grid;
   min-height: 100vh;
-  grid-template-columns: 0.7fr 1fr 1fr 1fr;
+  grid-template-columns: 0.6fr 1fr 1fr 1fr;
   grid-template-rows: 0.2fr 3fr;
   grid-template-areas:
     "sidebar nav nav nav"

diff --git a/client/src/network.js b/client/src/network.js
@@ -9,8 +9,8 @@ import { upload } from './s3'
 // export async function getPost({postId}) 
 // export async function savePost({type, imageUrl, description})
 
-// const BASE_API = "https://fathomless-lake-61399.herokuapp.com/api"
-const BASE_API = "http://localhost:5000/api"
+const BASE_API = "https://fathomless-lake-61399.herokuapp.com/api"
+// const BASE_API = "http://localhost:5000/api"
 
 // Create an object to send it as a bearer token
 const authHeader = () => { return { Authorization: `Bearer ${localStorage.getItem('token')}` }}

diff --git a/server/README.md b/server/README.md
@@ -1,62 +1,13 @@
-# server
-
-## Overview
-The goal of the Passion Project module is to provide each student with an opportunity to individually explore and expand their abilities within a hands-on project-based setting.
-
-The student will perform all roles including:
-* Product Owner
-* Product Designer/Planner
-* Project Manager
-* Designer
-* Dev Ops
-* Developer
-
-Students are encouraged to work independantly (or in small groups of 2 or 3 if there is a shared passion). 
-
-Students are able to use the tech stack of their choice. 
-
-## Outcomes
-Leading up to this point in our program you were asked to plan, design, and start to develop a product of your choosing. Given your increased experience with web and mobile technologies, you will be provided with class time to perform the tasks necessary to result in the following:
-
-* A deployed main branch of any web based project assets.
-* A clearly defined document with installation instructions as well as links and descriptions for all project assets.
-* A project board that shows all of your build activitites (GitHub Project, Trello, etc.)
-* A 5 minute presentation of the primary use cases for your application.
-
-## Process
-* Review your original product plan and design.
-* Make changes to your plan/design where necessary to ensure that you can have a completed product for the Passion project demo day.
-* Set specific milestones for your project, this will help to ensure that primary use cases are built in priority sequence and functional to a required minimum. (Not all milestones need to be completed...)
-* All commits are to be done on a branch other than main and connected to a GitHub "issue". If working alone you can review and merge your own pull requests.
-
-## Essential Features
-These are really based on the design of your application and up to you...The only requirements are that each application has:
-* some form persistant data that requires a database
-* an implementation of a user interface that appropriately ties the app to the persisted data.
-
-All other features should be included on an as needed basis for your application.
-
-## Due Date and Grading
-Presentations will take place 1pm-4pm PST April 16th, 2021.
-
-The due date for graded code to be on GitHub is 11:59pm April 18th, 2021.
-
-The passion project accounts for 20% of your SSDP5001 mark. 
-
-**SSDP5001 Weighting**
-* Career Success Series (13.33%)
-* Passion Project (20%)
-* Industry Project (66.67%)
-
+# Server Side Install, Debug and Deployment
 
 ## Server Layer
-server - Express (Heroku)
+server - Express (Heroku) 
 database -MongoDB
 - Install
   npm init
     npm install -g nodemon 
     npm i [email protected] -D
-  npm i express morgan body-parser dotenv mongodb bcryptjs jsonwebtoken
+    npm i express morgan body-parser dotenv mongodb bcryptjs jsonwebtoken
 - create server.js, etc.
 - deploy
   heroku login
@@ -79,17 +30,19 @@ database -MongoDB
   add "start": "node server.js" to package.json
   git add .
   git commit -m "change xxx"
-  git subtree push --prefix server heroku master (build https://fathomless-lake-61399.herokuapp.com)
+  git subtree push --prefix server heroku master (build https://fathomless-lake-61399.herokuapp.com) => push to Heroku Github
   git branch --show-current
-  git push origin 1ServerSetup
+  git push origin 1ServerSetup => My Personal GitHub
 
 
 https://blog.logrocket.com/5-ways-to-make-http-requests-in-node-js/
 -- 5 ways of http requests and I choose the most popular axios
 
-## debug on the express
+## Debug on the local Express
   run code . the server folder
-  click on the `run and debug`
-  select Node from the list
-  go to the breakpoint and will get the debug interrupt
+  CTRL+SHIFT+D -> Select 'Run and Debug' -> Choose Node.js -> It will run into breakpoints
+
+## Debug on Heroku (the CLI will keep an alive logging)
+  heroku login
+  heroku logs --app=fathomless-lake-61399 --tail
 
diff --git a/server/server.js b/server/server.js
@@ -28,7 +28,7 @@ mongoDatabase().then(database => {
 })
 
 
-const port = process.env.PORT | 5000
+const port = process.env.PORT
 app.listen(port, () => {
   console.log(`listening on port ${port}`)
 })