Skip to content

Project Proposal

Tianyi Liu edited this page Apr 7, 2017 · 12 revisions

Team Member: Tianyi Liu
Team Name: the-lone-seahawk
Website Title: tianyiliu.com

1. DESCRIPTION

“tianyiliu.com” is a customizable photo gallery website that displays photos with fun layouts and effects. The 4 pages of the website are landing page, gallery page, about page and instagram page. The content of each page is summarized below:

  • Landing page: featured photos in a slideshow style
  • Gallery page: all or selected photos in a list style
  • About page: information about the photographer (me)
  • Instagram page: photos from my instagram account

The gallery page has two modes: effect mode and view mode. The gallery page defaults to the view mode. In the view mode, users can expand photos by clicking and rearrange photos by dragging. In the effect mode, usera can apply layouts and effects to the photos. Visitors of the website can view and interact with the photos but cannot upload or delete photos (only administrator can upload and delete photos on Django admin site).

Each uploaded photo is required to have 4 categories of tags: Title, Series, Publish Date and Featured Photo (check box). These tags are used to sort the photos when a user searches for photos. All pages of the website has a navigation bar at the top with a search box. Users can filter the photos on the current page by searching with one or more tags. When a user searches for tag(s), the website updates the photos with only the photos containing selected tags.

2. REQUIREMENTS

One of the dynamic features of the website is the slideshow display. The administrator chooses the featured photos (using "featured photo" tag) to be displayed on the landing page in a slideshow style. The slideshow photos are chosen randomly from the pool of featured photos and updated with a specified time interval. The slideshow feature requires Javascript (Jquery will be used) as the photos need to be dynamically updated.

Another dynamic feature is the filter search. The website allows users to search in the navigation bar and filter photos by tags. When a visitor searches with certain tag(s), the website dynamically updates and rearranges the photos to display only the ones that contain the tag(s). The user sends a HTTP request by searching for tags in the navigation bar. The filter search feature requires Ajax as the website needs to load data from a server without refreshing the page.

The website will feature simplistic and elegant design with consistent theme and colors. Bootstrap CSS and external CSS stylesheets will used for styling.

3. RESPONSIBILITIES

Since I am an one-man-team, I will be working on all parts of the website including back-end, front-end, and design.

4. DEVELOPMENT PLAN

wk of 4/2

  • Come up with a list of acceptance criteria
  • Make navigation diagram
  • Create wireframe and then mockup (decide on user interface and site architecture)
  • Get feedbacks on the mockup
  • Stories and Design due on 4/6

wk of 4/9

  • Create all pages of the website (Html)
  • Create the main CSS stylesheet
  • Select photos that will be used for the website

wk of 4/16

  • Work on the interactive parts of the website (Javascript)
  • Add Ajax calls
  • Client-Side Implementation due on 4/20

wk of 4/23

  • Layout server side architecture (database tables and GET/POST methods)
  • Work on Django server
  • Modify Html and Javascript so the frontend works connects to the backend
  • Write up README with description and instruction of the website
  • Server-Side Implementation due on 4/27

wk of 4/30

  • Edit and refactor code as needed
  • Prepare the final presentation
  • Final presentations@10:30a - 12:30p on 5/4

5. REQUESTED SUPPORT

I will be using Django to implement a server. I have very limited experience with Django and I would appreciate extended help for server implementation.

Clone this wiki locally