Giter VIP home page Giter VIP logo

map-project's Introduction

Part 3: Build a CRUD App

Summary

In Part 3 of the assessment, we'll demonstrate our proficiency in building web-stack applications: user authentication, associations, validations, controllers, views, etc. Even a little bit of CSS.

Site Overview

We'll be building a simplified version of a blind auction site. In a blind auction, bidders do not see how much other bidders have bid.

The required functionality of the site will be described in more detail in the Releases section, but here's a basic overview.

All Users

  • Browse available items

Unregistered Users**

  • Register a new account

Registered Users

  • Sign in
  • Sign out
  • List new items
  • Place bids on items
  • Have a profile showing their listing and bidding activity

Completing the App

Complete as much of this CRUD app as possible in the time allowed. If time is running out and it looks like the app will not be completed, continue to work through the releases in order and complete as much as possible. Be sure to ask questions, if you find yourself stuck.

Releases

Pre-release: Setup

We'll need to make sure that everything is set up before we begin working on the application. From the command line, navigate to the part-3 directory of the phase 2 assessment. Once there, run ...

  1. $ bundle
  2. $ bundle exec rake db:create

Release 0: User Registration

Users will need to register for a new account. Create a link on the home page that will take them to a page where they can enter their desired username and password. The username must be unique.

If both constraints are met, the user should be considered logged in and redirected to the home page where all references to "Register" are removed.

If either constraint is not met, the user should see the registration form and the associated error messages.

Release 1: Login/Logout

Login

Given:

  • There is a previously registered user
  • User is not currently logged in:
  1. On the home page, create a link to login.
  2. When a user clicks on this link they should be taken to a page with a form to enter their credentials.
  3. If the credentials match, the user should be taken back to the homepage and the login link should be replaced with a logout link.
  4. If the credentials do not match, the user should see the login form and an error message stating the credentials were not valid.

Logout

Given there is a previously registered user and they are currently logged in:

  1. On the home page, create a link to logout.
  2. When the user clicks on the logout link they should be taken to the home page and the links "Register" and "Login" should both be visible.

Release 2: CRUD'ing a Resorouce

The user's profile page is where users are able to manage their listed items. We'll start off by giving them the ability to add an item and then work through the remaining CRUD actions.

Creating Items

Given:

  • The registered user is signed in:
  1. On the home page create a link to the user's profile page.
  2. When the user clicks on the profile link they should be taken to their profile page.
  3. Create a link on this page to add an item to the auction site. The item should include things like a name and/or title, description, when the user would like the auction to start and when it should stop.

Note: When creating and or editing an item, you'll need to create forms that allow you to enter dates. The HTML5 datetime input type is tricky to use with ActiveRecord. Consider using something like <input type="text" name="my-date"> in the markup. When filling in the field, use the YYYY-MM-DD or YYYY-MM-DD HH:MM:SS format (e.g. 2015-04-01 14:30:00).

After submitting an item, the user should be back on their profile page.

Reading Items

Given:

  • The registered user is signed in
  • There exist previously-created items
  1. Create a section on the profile page to display all the items. This section should not include the long form description of the item.

Updating Items

Given:

  • The registered user is signed in
  • There exist previously-created items; some owned by the logged-in user, others not
  1. On the profile page, create an edit link associated to each of the items the user has created. This link should only be visible if the user logged in is the user that created the item.
  2. Users who did not create the item should not be able to edit the item's data
  3. When the user clicks the edit link associated to the item, they should be taken to a page to edit that item's details. After submitting this information the user should be taken back to their profile page and see the item's updates should be reflected on the page.

Deleting Items

Given

  • The registered user is signed in
  • There exist previously-created items; some owned by the logged-in user, others not
  1. On the profile page, create a delete link associated to each of the items the user has created. Just like in the update section, this link should only be visible if the user logged in is the user that created the item.
  2. Users who did not create the item should not be able to delete the item
  3. When the user clicks the delete link, the user profile page should reload and the item should no longer be visible.

Release 3: Bidding

Up until now, the home page has largely just contained links to allow the user to register or login, or if they were logged in, to logout. Now that users have the ability to create items for others to bid on, let's start filling in the homepage.

Viewing Active Items

Given

  • The registered user is signed in
  • There exist previously-created items; some owned by the logged-in user, others not
  • There exist items which are active

Create a section on the home page to list the items that are currently available and active. To clarify, active means the items have start date on or before today and the end date is on or after today.

Creating a Bid

Given

  • The registered user is signed in
  • There exist previously-created items; some owned by the logged-in user, others not
  • There exist items which are active
  1. Make the name or title of the listed items in the home page a link. When the user clicks on a link for an item, they should be on a page that is displaying the details of the item. This will include the long form description and add a section on the page to display the current number of bidders.
  2. Add a form to the item detail page that will allow the user to enter a bid amount. The submit button for the form should say "Place Bid".
  3. When the user submits the bidding form, the page should reload. Where the form was located, there should be the text "Thank you for your bid. Good luck!" and the number of bidders section should be incremented by 1.

Login or Register to Bid

Given:

  • The current user is not logged in
  • The user is on the item details page for a previously-created item

In place of the bidding form, a user should see the text "To place a bid please login or register." Both login and register should be links taking the user to their respective pages.

Release 4: Bid on Items on the Profile Page

Now that we can bid on items, let's make it easy to keep track of the things we have bid on.

Bid on Items

Given:

  • The registered user is logged in
  • Registered user has previously placed bids on several items
  • User is currently on their profile page

Create a section to display the items the user has bid on.

Won Items

Given:

  • The registered user is logged in
  • The registered user placed the highest bid on several items that are no longer active
  • The registered user is currently on their profile page

Create a section to display the items they have won. This is items that are no longer active (end date is before today) and the bid placed on the item is the highest of all the bidders.

Conclusion

Part-3 wraps up the assessment. If you haven't already done so, commit your changes. Please wait until the end of the assessment period to submit your solution.

map-project's People

Contributors

karlaking avatar

Watchers

James Cloos avatar

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.