FINAL PROJECT


This is your final project for the class, check the class schedule for important dates.

Finished Project Links NEW

All final projects are live! Please, follow this link to check them out.

Goals

  1. To apply all the fundamental and basic knowledge gathered across the term about HTML, CSS, JavaScript, PHP, and Databases.
  2. To understand the requirements of a client for a given project and to be able to design, implement, and present the project.

Instructions

  • Each group will read the requirements for their specific project.
  • You will code your website and upload it to a web hosting service (the CS Department will provide the hosting). If you want to use a different web hosting place, make sure it allows you to use databases and PHP.
  • You will use the Bootstrap framework to give a general style to your site as well as your own CSS files for further customization. You are welcome to use other CSS frameworks if you want, as long as you discuss it as a group.
  • Design and test your database on the web hosting of your choice.
  • Make sure to perform extensive testing of your website, so you can find and fix as many bugs as possible before the presentation and demo date.
  • Your project should implement a responsive design in which your website adapts to the different output media (smartphone, tablets, laptops, desktops, and so on).
  • Keep it simple and do not overwhelm yourselves, make sure the basics are covered before starting miscellaneous features.

Technologies and Concepts

Each team will make use of the technologies explored in class, as well as Internet resources a to complete the final project. Such technologies are:

  • HTML5
  • CSS and Bootstrap Framework (or W3.css)
  • JavaScript (with jQuery) and AJAX (React might be used as well)
  • PHP
  • MySQL Database (or MariaDB which is included in the XAMPP stack)

Your team is also required to apply some of the concepts discussed during the class:

  • Error handling
  • Security
  • Sessions
  • Web Services

Evaluation

TBD

Expected Features of your Website

In addition to the specific requirements for your type of project (listed in the sections below), the following are expected features for this project:

  • Your website should have a name, a simple logo, and follow a design theme.
  • Your website should have a Landing Page, which is the first page the non-registered users will see after typing the URL for your site.
  • Your website needs to offer a registration option for new users, as well as login/logout options for registered users.
  • Each user should have a simple My Account page where they can change user-specific settings such as passwords, profile picture, and have the ability to delete their account.
  • Registered users will have a personalized Home Page (the content of the Home Page will vary depending on the type of project) after logging in.
  • Your website will integrate some form of web service or API, such as:
    • Google Maps: To show the location in a map, for a user.
    • Weather: To show the weather for a user's location.
    • Google URL Shortener: To short a long URL and be able to share short URLs.
    • Random number generator.
    • Other web service or API you consider of interest for your website, such as those that provide lists of countries, cities, zip codes, and so on.
  • Your website need to look visually pleasing and intuitive for the users. Make the best use of the Bootstrap framework and CSS design.
  • You should use JavaScript (or jQuery) for user input validation.
  • Optional: You should make use of AJAX for asynchronous server requests.

Type 1: Image Sharing Site

The Media Sharing Site will allow registered users to upload and share images among the different users of the site, in an easy and practical manner. Project Type 1 draws inspiration from famous sites like Imgur and Instagram.

Click for more details...

In addition to the expected features, the following are specific requirements for this project:

  1. Your website will allow registered users to upload images and add information to the image such as: title, short description, and tags. Users can upload images that are public or private. Private images are only visible to the user that uploads it.
  2. Every image uploaded to the system should have its unique URL. This URL will be used to access the image in an Image Page. The page displaying the image should have the following options for registered users:
    1. Like and Dislike options.
    2. Display the Popularity of the image based on the amount of likes minus the amount of dislikes.
    3. Add to Favorite option.
    4. Display the amount of times the image has been viewed.
    5. A section where all the tags associated with the image are displayed.
    6. A comment section where users can leave comments about the picture.
  3. Non-registered users can see and share public images only. They also can see the comments, tags and popularity of these images.
  4. Your website should have the most popular images of the day on the Landing Page. The metric to select such images is up to you.
  5. The comments section of an image should allow registered users to interact with the comments in the section. A comment should have:
    1. Like and Dislike options.
    2. Number of likes and dislikes.
    3. Username of the user who make the comment, popularity of the comment (based on likes minus dislikes), and how old the comment is.
  6. The comment section should allow to sort the main comments by popularity (based on likes minus dislikes, this can be the default), and by newest (to see the latest comments)
  7. Your website should show the images uploaded by their user in their Home Page. Each image can briefly display some information about itself (title, date uploaded, popularity, and so on). The image is visible to everyone if it is marked as "public". If marked as "private" the image is visible only to the user that uploaded it (when they visit their own Home Page).
  8. The Home Page should also show the images a user has marked as "Favorite".
  9. The user that owns the image should be able to delete any comment on the image as well as the image itself.
  10. Your website should have a side navigation section with a preview of the most popular images and the most popular tags (based on number of times used on the current day). The side navigation section should be visible everywhere, except in the Landing Page.
  11. Your website should have an image search functionality based on tags.
  12. Any other functionality your group wants to add to the website is encouraged.

Type 2: Short-Message Posting Site

The Short-Message Posting Site allows registered users to post short messages with the goal to share an idea, a thought, a link to a news site, and so on. The short messages, depending on the privacy setting, might be public (everyone can see it) or private (only followers can see it). Project 2 draws inspiration from the famous sites Twitter and Facebook.

Click for more details...

In addition to the expected features, the following are specific requirements for this project:

  1. Your website will allow registered users to post short messages with a maximum length of 200 characters.
  2. Your website should allow registered users to "follow" another registered user. Messages from the followed user will be available to the users that follow the original poster (OP).
  3. Your website should allow a user picture and a username for registered users. Any user can be referenced in a post by using their username with the "@" sign such as @user_name. This reference should be a link to the referenced user's Profile Page. This page should show information about the particular user: number of posts made, number of likes, how long has the user been registered, and so on.
  4. Your website should display all the user's short messages in their personal Home Page as well as the short messages posted by other users being followed. Make sure to distinguish messages that have been posted by the user, by other users being followed, and messages in which the user has been referenced (or mentioned).
  5. Each posted message will have:
    1. Name and picture of the user that posted.
    2. The actual message.
    3. Number of likes and the option to like the message (if you already liked the message, it should show). The number of likes of a message will determine its popularity.
    4. The option to follow the user (if you are already following the user, it should show).
  6. Your website should allow the use of hashtags in messages (the length of the hashtag will count towards the maximum character limit). The hashtags have the form #hashtag. The hashtags when clicked, should take you to all the short messages that contain such hashtag.
  7. Your website should have the most popular messages of the day on the Landing Page. Non-registered users will be able to see messages if they are marked as public and only if they appear in the Landing Page.
  8. The Home Page should show the number of followers the user has and the number of users that they are following.
  9. Your website should have a user search functionality in order to be able to find and follow users.
  10. All the messages should be listed in chronological order.
  11. Your website should suggest following certain users based on geographical proximity or some other criteria. This information among other options (like most popular hashtags of the day, and so on), should be shown as a side navigation section (except in the Landing Page).
  12. Any other functionality your group wants to add to the website is encouraged.

Type 3: Online Store

The Online Store allows registered users to buy products using a fake currency called "webcoins" (currency symbol ¤, HTML code ¤). The Online Store will have a main type of product (i.e. books, sporting goods, cloth, food, etc) to sell. Project 3 draws inspiration from the famous sites Amazon and Etsy.

Click for more details...

In addition to the expected features, the following are specific requirements for this project:

  1. Your website will allow registered users to browse a catalog with a brief variety of products (if selling books for example, you should have categories like Romance, Sci-Fi, Classics, Non-Fiction, etc. with at least 1 product in each category). This mean the design of a catalog where an item being sold should have:
    1. Available number of units in stock.
    2. Price, weight, dimension and some other description specific to the item.
    3. A picture of the item.
    4. Other information you deem important.
  2. Your website should implement a shopping cart where users can add items that they want to buy. The shopping cart should allow registered users to save its content for later or checkout their items.
  3. Each new registered user will receive a gift card of ¤500 (five hundred webcoins). Each time a user checkout the items in their cart, the amount to be payed will be deducted from the gift card. A user with insufficient funds can't finish the checkout process.
  4. If a user wants an item quantity that is bigger than the available number of units in stock, deny it.
  5. Items displayed in the Catalog Page should have the options to view it (which will open a Product Page with more details about the item), add to favorite list, and add to cart (which will add 1 unit of the product to the shopping cart). The items should display its name as well as its price, the units available, and the user rating.
  6. The Catalog Page should have a side navigation section with options to filter items by: price, popularity, and product specific filters (such as "book genre" for an online book store, etc.)
  7. The Product Page should have a thorough description of the specific item, option to choose the number of units to be added to the cart, as well as a Product Review section with options for the users to rate the product from 0 (worthless) to 5 (excellent). These ratings will be displayed as part of the product description. The Product Review section will also allow to answer a "would buy again?" question and display the number of users that answered yes and no, respectively.
  8. In your Catalog Page, if there are not units available of a particular product, display it as "sold out" (always display the products).
  9. Your website should have a Landing Page with the options to register and/or login, as well as a brief description of the products you are selling.
  10. The user's Home Page should have a history of previous purchases, their favorite items list, and the items in the saved cart.
  11. Allow a user to be able to reload their webcoin gift card once every 24 hours from My Account page. This, of course, is not how real life works ;p
  12. You might discuss as a group how to re-stock the catalog once the majority of the store's inventory has been sold.
  13. Any other functionality your group wants to add to the website is encouraged.

Type 4: Community Board (a.k.a Classifieds)

The Community Board allows registered users to post messages regarding jobs, for sale, items wanted, or advertising services. Project 4 draws inspiration from the famous site craigslist.

Click for more details...

In addition to the expected features, the following are specific requirements for this project:

  1. Your website will allow registered users to browse a catalog of services being offered, an contact the user with regards to their post. A user will also be able to post services they are offering.
  2. The catalog should be organized by category. You need to decide what services your site will allow:
    • Sell: selling items such as used books, lab instruments, and so on.
    • Help Wanted: it can be for tutoring, pet sitting or walking, grocery shopping, moving out, cleaning, and so on.
    • Opportunity: for jobs, internships, student leadership, and so on.
  3. Your site should also implement a search page, where users can find services by keyword, user names, and so on.
  4. When a registered user posts about a service they want to offer, the following are required for the post:
    • Name of poster
    • Category of service
    • Availability of service (dates and/or times)
    • Expiration condition (by date, by number of requests, etc.)
    • Description
  5. Each post should have a Post Page where users can see the details of the service, the rating of the poster offering the service, and a contact section to request the service. Information about the poster (phone numbers, email, and so on) should be hidden. Contact will happen within the site. Each poster should have the ability to delete their posts.
  6. Registered users will have a Home Page where they'll see services they have requested, and the services they've posted.
  7. Registered users should have a Messages page where they can see the people who have contacted them or that they've contacted. When a conversation is selected users should have the ability to reply, cancel a request, delete the conversation, block a user, and rate the service provider after the service is done.
  8. Any other functionality your group wants to add to the website is encouraged.