Allow User to

• Like Books
• Dislike Books
• Wish for Books
• Review Books

• Title

• Elevator Pitch

• Concept

• Process

• ========> Technologies

• ========> Tasks/Roles

• ========> Challenges

• ========> Successes

• Demo

• Future Development

• Links

• ========> https://lovely-librarian.herokuapp.com/

• ========> https://github.com/bcassellius/lovely-librarian.git

• #23

  • User Can Click on the Date
  • User Can add an Event
  • User Can add a start time

• #24

  • User Can Click on the Date to open it
  • User Can Change Name of Event
  • User Can Change Time of Event

• #25

• #19
• <10 minutes
• everyone speaks

Just crush it.

Technical Acceptance Criteria: 25%

• Satisfies the following code requirements: Application uses React for the front end.

• Application has a GraphQL,

• API, with a Node.js,

• Express.js,

• server,

• queries and mutations for retrieving, adding, updating, and deleting data.

• Application uses MongoDB and the Mongoose ODM for the database and protects sensitive API key information on the server.

• Application includes user authentication using JWT.

Concept 10%

• Application should originate from a unique and novel idea.
• Your group should clearly and concisely articulate your project idea.

Deployment: 20%

• Application deployed at live URL on Heroku and loads with no errors.
• Application GitHub URL submitted.
• Portfolio at live URL submitted, featuring project.

Repository Quality: 10%

• Repository has a unique name.
• Repository follows best practices for file structure and naming conventions.
• Repository follows best practices for class and id naming conventions, indentation, quality comments, etc.
• Repository contains multiple descriptive commit messages.
• Repository contains a high-quality README file with description, screenshot, and link to deployed application.

Application Quality: 15%

• Application user experience is intuitive and easy to navigate.
• Application user interface style is clean and polished.
• Application is responsive.

Presentation 10%

• Your group should present using Google Slides, Powerpoint, or a similar presentation software.
• Every group member should speak during the presentation.

Collaboration 10%

• There are no major disparities in the number of GitHub contributions among group members.

Bonus

• Fulfilling all three of the following requirements to turn your app into a PWA will add 10 points to your grade. Note that the highest grade you can achieve is still a 100:
• Uses a web manifest
• Uses a service worker for offline functionality
• Is installable

Due Date

Your group will work on this project over the course of the next two weeks.
Project presentations will take place during the second virtual class during the week of the next module, Module 24.

The project itself is due on the final day of class with the group presentations. Each member of your group is required to submit the following for review:

The URL of the deployed application.
The URL of the GitHub repository, with a unique name and a README describing the project.
The URL of your portfolio, with your project added to it.
You’ll be able to submit your project assignment when you reach Module 24 next week.

Project Requirements

• Use React for the front end.
• #7
• Use MongoDB and the Mongoose ODM for the database.
• Use queries and mutations for retrieving, adding, updating, and deleting data.
• #5
• Have a polished UI.
• Be responsive.
• Be interactive (i.e., accept and respond to user input).
• #6
• Protect sensitive API key information on the server.
• Have a clean repository that meets quality coding standards (file structure, naming conventions, best practices for class and id naming conventions, indentation, high-quality comments, etc.).
• Have a high-quality README (with unique name, description, technologies used, screenshot, and link to deployed application).
• Finally, you must add your project to the portfolio that you created in Module 20.

You should also consider the following suggestions to help your project stand out:

CSS Styling

Instead of using a CSS library like Bootstrap, consider one of the following suggestions:

• Look into the concept of CSS-in-JS, which abstracts CSS to the component level, using JavaScript to describe styles in a declarative and maintainable way. Some popular libraries include styled-components and Emotion.

• Try using a component library, such as Semantic UI, Chakra UI, or Ant Design.

• Create all the CSS for your application just using CSS.

Ultimately, it doesn't matter which of these options you choose—it just needs to look professional and be mobile-friendly.

Payment Platform

• #9
  Consider integrating the Stripe payment platform. Even if you don’t create an e-commerce application, you could set up your site to accept charitable donations.

Bonus

• #8
  Although this is not a requirement for your project, see if you can also implement functionality to meet the minimum requirements of a PWA:

• Uses a web manifest

• Uses a service worker for offline functionality

• Is installable

WHEN I am I click on the Staff Directory option

THEN I am presented with a list of employees and contact info (title, phone extension, email, office #)

• Page is visible ONLY when logged in
• #17

GIVEN the Lovely Librarian App

WHEN I reach the landing page

• THEN I am presented with the options Login or Signup

WHEN I click on the Login/Signup menu option

• THEN a modal appears on the screen with a toggle between the option to log in or sign up

WHEN the toggle is set to Signup

• THEN I am presented with three inputs for a username, an email address, and a password, and a signup button

WHEN the toggle is set to Login

• THEN I am presented with two inputs for an email address and a password and login button

WHEN I enter a valid email address and create a password and click on the signup button

• THEN my user account is created and I am logged in to the site

WHEN I enter my account’s email address and password and click on the login button

• THEN I the modal closes and I am logged in to the site

WHEN I am logged in to the site

• #13

WHEN I click on the Request Time-Off option

• #14

When I click on the See Staff Schedule option

• #16

WHEN I am I click on the Staff Directory option

• #15

WHEN I click on the Logout button

• THEN I am logged out of the site and presented with a menu with the options Login or Signup

• unique name
• description
• technologies used
• screenshot
• link to deployed application

• Job Role
• Email
• Editable "Likes":
• Staff members can make a like is things they like so that other members of the staff can cheer them up on tough days
• This is for CRUD Functionality
• This is a side panel. It should take up ~20% of the screen and disappear when the screen size becomes small. This is done in CSS @kaohzina

To show user is logged in, add a personalized message.

• popup --> You are now Logged In!
• navbar --> Hi <username>!
• avatar --> Navbar or Dashboard or blog

• seed data
• deployed --what is the link?

Link any book reviews written to the blog page so others can see what people think of a book.

• /utils/auth.js
• const jwt = require('jsonwebtoken');

Allow users to

• create posts
• modify posts
• delete posts
• reply to posts

• nodemon
• bcrypt
• express
• apollo-server-express
• graphql
• jsonwebtoken
• mongoose
• concurrently

Allow user to scan isbn bar code to access book info.

• npm i apollo-server-express graphql
• const { ApolloServer } = require('apollo-server-express')

Shifting this feature:
Add the react calendar component. Ultimate goal:

Agenda Features

• Allow users to add events to calendar
• Allow users to modify events on calendar
• Allow users to delete events on calendar

Possibly Show some kind of schedule

• Show staff schedule (non-user-editable)

Allow an admin to add/edit/delete staff members.

• Uses a web manifest
• Uses a service worker for offline functionality
• Is installable