Giter Club home page Giter Club logo

overlook's Introduction

Overlook

Abstract

  • I built a room booking website using GET and POSt from an API server. The site allows user to book rooms, see their past and upcoming bookings and filter by room type.

Context

  • I am currently in Mod 2 at Turing School of Software and design. It is a seven month bootcamp and I am currenlty learning front end.

Technologies Used

  • Html
  • CSS
  • Javascript
  • Mocha/chai for testing
  • Webpack
  • Github

Installation Instructions

In order for this application to function, it will require accessing both our backend server repository as well as our front-end repository.

Client Side Server Setup

-Fork the backend repoository here -Clone it to your local machine using the command: git clone git@github. com:turingschool-examples/overlook-api.git.

  • Run the command: cd overlook-api
  • Run the command: npm install
  • Run the command: npm start

Client app Setup

  • Open a separate tab in your terminal using command T
  • Fork the frontend repository here
  • Clone it to your local machine using the command: git clone [email protected]:Jnguyen615/Overlook.git
  • Run the command: cd overlook-project
  • Run the command: npm install
  • Run the command: npm start
  • Once the modules have finished compiling, enter http://localhost:8080/ into your browser to see the live web page.

Preview of App

Screenshot 2023-09-26 at 5 46 03 PM Screenshot 2023-09-26 at 5 46 16 PM Screenshot 2023-09-26 at 5 46 30 PM

Learning Goals

  • Use object and array prototype methods to perform data manipulation
  • create a clear and accessible user interface
  • Make network requests to retrieve data
  • Implement a testing suite using TDD
  • Write dry, reusable code that follows single responsibility principle

Wins

  • Getting the data in successfully.
  • Not taking up too much time on CSS - display:grid is amazing

Challenges

  • I have discovered things I need to work on while doing this project, like architecture
  • I struggled with the POST request and getting it to display on my page, which had a lot to do with how my app is set up. I learned a lot about different ways fetches and posts can be handled though and am happy I have it set up the way I do for now. I thought it was working but upon rechecking after the due time, it wasn't working as expected.
  • I struggled with time on this project, I spent all hours of the day for days on it and just kept encountering new bugs which I had to fix before moving on.
  • Error messages - while they were working, I realized they indeed were not working in the end.

Hopes

  • I plan to finish this project out, with the proper filtering of the room types. I also need to go back and check accessibility and make it up to standards.
  • I'd like to implement a date picker for the calendar
  • I'd like to have a vertical scrolling bar
  • I'd like to do a counter - where on login the numbers for the total cost go up.
  • Better styling - I'd like to revamp the styling.
  • Split up the past and upcoming bookings in their own sections and make sure the new booking gets added to it
  • Fix the error handling

overlook's People

Contributors

jnguyen615 avatar robbiejaeger avatar hannahhch avatar cassandragoose avatar niksseif avatar dependabot[bot] avatar hfaerber avatar khalidwilliams avatar marybruff avatar

Watchers

avatar avatar

overlook's Issues

Build dummy data

Description: Build a data set for testing that mimics the api data.

Tasks:

  • build data set following api data

Acceptance Criteria:

  • Data set that matches the api data for testing

Dashboard/Functionality

Description: write functions for the customer dashboard page

  • user should see all past and upcoming room bookings
  • user should see TOTAL amount spent on rooms up to date

Tasks:

  • date picker?
  • function to calculate costs of past bookings
  • function(s) to get all past AND upcoming room bookings from the user
  • get customer id
  • get customer name

Acceptance Criteria:

  • tests written for functions
  • Proper calculation is coming

API Call

Description: Do a GET request to fetch the data and make sure it's coming through via console.log

Tasks:

  • Fetch API data
  • include any needed .then/s
  • include a .catch for errors
  • add as much error handling for status errors as deemed necessary
  • Display the data in the console.log

Acceptance Criteria:

  • Data shows in the console log

Customer Interaction/functionality

Description: Functionality for these to be displayed

  • I should be able to select a date for which I’d like to book a room for myself
  • Upon selecting a date, I should be shown a list of room details for only rooms that are available on that date
  • In the event that no rooms are available for the date/roomType selected, display a message fiercely apologizing to the user and asking them to adjust their room search (sad path)
  • Should be able to filter the list of available rooms by their roomType property key
  • Should be able to select a room for booking

Tasks:

  • function to filter out rooms by roomType
  • new api call post booking
  • function that lets user select a room for booking
  • function that shows users room by specified date (only that date) - innerHTML
  • returns a kind error message if no room is found

Acceptance Criteria:

  • All functions are written as dry as possible
  • All tests are written and passing - including sad paths
  • User should be able to pick a date
  • Rooms are displayed on page by date
  • new booking should show up on main page

Login Page

Description: Build a login page and have the user's name be displayed somewhere on the page

Tasks:

  • function to retrieve user
  • OR have it on page load and hide the form on submission (button click) this would mean building html for it in the html file

Acceptance Criteria:

  • User can log in with their credentials
  • User will see their dashboard upon login and a welcome message with their name

Basic CSS

Description: Set up a basic bare minimum CSS to run the app on until functionality is complete

Tasks:

  • css

Acceptance Criteria:

  • Basic css!

Dashboard/DOM

Description: as a customer I should be able to see: any room bookings I have made upcoming or past and the total amount I have spent on rooms

Tasks:

  • look into modals for card and login page display
  • dom - function to display the past AND upcoming bookings (inner html?)
  • dom - function to display total spent up to date
  • dom - function to display current date (possible extension)

Wireframe

Description: Build out a basic wireframe for the page

Tasks:

  • build out wireframe
  • include html elements

Acceptance Criteria:

  • Presentable wireframe of what the app will look like
  • Includes 3 inspirations
  • maybe has html elements in it as well - not necessary though

Notes:
Figma hates me but I will try again or use canva this time.

Read Me

Description: Write the read me

Tasks:

  • write read me

Acceptance Criteria:

  • Good gif(s) showcasing the functionality of the project
  • Detailed abstract with what and why make the project
  • Wins and challenges should reflect how I've grown throughout this project
  • Add in future app extension ideas

Accessibility

Description: You must make the site as accessible as possible for all types of users to be able to use

Tasks:

  • Must be able to tab through page - not using a mouse at all
  • App must still be usable when tested with colorblind extension
  • Must score as close to 100% on Lighthouse audit - explain why you aren't if you can't reach it
  • HTML is written semantically and should only use ARIA tags when appropriate

Acceptance Criteria:

  • can tab and enter through whole site and access all part of the page
  • Still good when colorblind tested
  • 100% on Lighthouse
  • Semantic HTML

HTML

Description: Build out the html for the main page entirely - doesn't include log in form yet

Tasks:

  • Build html as semantic as possible
  • check for classes and id's on almost everything
  • aria tags if necessary

Acceptance Criteria:

  • same as above

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.