Skip to main content

Project 2, Milestone 2: Design the Community Events SPA

In this milestone, you will design the user interface for your community events single-page application leveraging trending interactive web application design patterns. To implement a consistent design across your SPA, you will implement a component library using Tailwind CSS and then use that component library to implement a draft of your design.

info

The course material needed to complete this part was covered in classes 15 and 16. (In addition to the design principles you learned in INFO 1300.)

Project Overview​

For your second project you will design and implement an interactive community events single-page application using the MERN stack. For this project, you may only use the methods taught in this course.

The idea for this project to encourage community engagement by providing a platform for community members to discover and participate in local events. However, community engagement is not a strict requirement for this project. You may create an events web application for any type of events you like regardless of whether it promotes community engagement.

Learning Objectives​

  • Design a single-page application that employs common interactive web application design patterns and trends.
  • Design and implement a reusable component library for your design system using React and Tailwind CSS.
  • Implement a client-side rendered web application using React and a Utility-First CSS framework (Tailwind CSS).
  • Employ the reference documentation to solve problems independently.

Help & Support Resources​

We want you to get the help and support you need. Use the course's support resources for help with this assignment.

Git Repository & Codespace​

  1. Create your assignment repository.

    Visit https://landrace.infosci.cornell.edu/courses/info2310-2026sp/repos/project2 in your browser to create your assignment repository.

  2. Open your assignment repository in GitHub.

    After creating your repository, visit https://landrace.infosci.cornell.edu/courses/info2310-2026sp/repos/project2 in your browser and follow the link to open the repository on github.com

  3. Open your assignment repository as a codespace.

Submission Requirements​

Your assignment should meet the following requirements for credit:

  • Submit your own original work (design and code) for this assignment.

    No credit is provided for submitting design and/or code that is taken from the course-provided examples.

  • Your code should be original. However, the structure of the code will mirror the class examples.

    The structure of your code will align with the class examples. This is to be expected. We are learning web programming and there's only so many ways to structure code to solve its problems.

  • You are required to use the methods and techniques covered in class.

    No credit is provided for using methods that are not covered in this class.

  • Your single-page application should be visible in the browser and functional upon launching the development web server Start Debugging from the Run menu.

    If your single-page application does not launch using this method or is not visible in the browser after launching the server, we are unable to provide any credit.

  • All files should be in the location specified in this document for credit.

    Professionalism is important. Incorrectly placed files will not be graded; no partial credit is provided either.

  • Follow the submission instructions below.

    Submit all materials to your GitHub repository's main branch for this assignment. When you're finished stage, commit, and push your submission to GitHub. Then fill-out the submission form to complete your submission.

    Failure to complete the submission form will result in 0 credit; no submission form = no submission. No leniency. No exceptions.

Part I: Design the Community Events SPA​

Using the results of the Monday's activity as a starting point, design the user interface for your community events single-page application. Your design should leverage common interactive web application design patterns and trends.

Requirements & Credit​

Credit: ~10 points

This part is graded for correctness. Meet the following requirements for full credit:

Events SPA:

  • The application is a single page. (You may not have multiple pages.)
  • You may design a narrow or wide screen SPA. (You need not design a responsive SPA.)
  • The application displays all events in the collection at once.
  • Users may filter events by a single tag.
  • Users may search events using text search.
  • Each event's information is presented alongside an image for the event.
  • Users interact with an event to view additional details for it in a modal.
  • Users may like / unlike an event anonymously.
  • No user accounts; login/logout is prohibited.

Design:

  • The design should employ the common interactive web application design patterns and trends explored and discussed in class.
  • The design is comparable to the examples we studied in class.
  • Your design should be aesthetically pleasing and employ visual design principles.
  • You may design for narrow or wide screens. Your design need not be responsive.
  • Your design should be your original work.

Sketches:

  • Plan your design through sketching. (No credit for providing screenshots of your implemented design from later parts of this milestone.)
  • All sketches should be PNG, JPG, WEBP, or PDF files. (No HEIC files.)
  • All sketches should be located in the design-plan folder for credit.
  • At least two sketches are required for credit.

Professionalism:

Professionalism means meeting the client's requirements. Not doing less and not do more. Your submission should meet the requirements specified for this part and no more.

You are required to implement your project using the methods taught in class prior to the release of this milestone.

Instructions​

  1. Plan your design.

    The design you planned during class likely fulfills the design requirements of this assignment. You may use the photo you took in class for this part if you wish.

    Include sufficient detail so that any student in the course would be able to understand and implement your design.

  2. Review your design for interactive web application design patterns and trends.

    Review the design patterns and trends we explored in class. Make sure your design employs these patterns and trends.

Submission​

Stage, commit and push all changed files in your Git repository to the GitHub server. (All commits should reside on the main branch.)

Do not complete the submission form.

Part II: Design System Component Library​

A design system is an important tool for creating a consistent user interface. In this part, you will implement a component library for your design system using React and Tailwind CSS.

Requirements & Credit​

Credit: ~20 points

This part is graded for correctness. Meet the following requirements for full credit:

Design System Component Library:

  • Implement a component library in components/library for your design system using only React and Tailwind CSS.
  • The component library should include components for all the common UI elements in your design (e.g. buttons, cards, modals, etc.)
  • All components should be reusable for any application.
  • Each component should be styled using only Tailwind CSS.
  • Rhythm exists across all components; all components should use similar styling to create a consistent look and feel across the application.
    • The colors should be consistent across all components.
    • The typography should be consistent across all components.
    • The spacing should be consistent across all components.
    • The shape of components should be consistent across all components.
  • Where appropriate, include variants of components to support different use cases. (e.g. a primary button and a secondary button)
  • All components should be generic components that could be used in any SPA; no components should have event specific data or logic.
  • The component library should be your original work.

Professionalism:

Professionalism means meeting the client's requirements. Not doing less and not do more. Your submission should meet the requirements specified for this part and no more.

You are required to implement your project using the methods taught in class prior to the release of this milestone.

Any custom CSS with the use of explicitly defined CSS property value pairs is prohibited and will result in 0 credit for this part.

If any functionality exists not covered in class up to this point, 0 credit is provided for this part.

Instructions​

  1. Create a single component for a common user interface element in your design. A button is often a good place to start.

    Add a sample component to your App component to test your component as you build it.

    Style the component using only Tailwind CSS using the style guide that you authored during the in-class activity. (Alternatively, you may change your style guide if you wish.)

    Add variants like primary and secondary if appropriate. Include additional props as needed to make the component reusable. For example: you might have a shape prop for a circular button (for a like button) and a rectangular button.

  2. Create additional components for other common user interface elements in your design.

Submission​

Stage, commit and push all changed files in your Git repository to the GitHub server. (All commits should reside on the main branch.)

Do not complete the submission form.

Part III: Implement a Draft of Your Design​

Implement a draft of your design in React and Tailwind CSS. A draft is "bare bones" version of your application. Implement components with minimal hard-coded data, and style them with Tailwind CSS.

Your application should be fully styled. It should look professional and polished. The data you display will be hard-coded for this milestone. (We will fix this in future milestones.)

Do not implement any functionality for rendering data from your database. Do not implement any like/unlike functionality. Do not implement any filtering or searching functionality. While your SPA should be fully styled, you should only code what's necessary to display a minimum-functionality version of the design.

Requirements & Credit​

Credit: ~20 points

This part is graded for correctness. Meet the following requirements for full credit:

Best Practices:

  • Employ the component library you created in Part II to code your design.
  • Use components to create reusable portions of your interface. (Yes, these can be event specific.)
  • Use conditional rendering, where appropriate.
  • Expertly employ interactive web application design patterns and trends.

Draft:

  • Hard-code the data directly in your components.

  • Display 3 identical events in your application.

  • Display a single hard-coded image for all 3 events. (This image should not be stored in the database!)

  • Display the like/unlike controls to the user, but do not implement them.

  • Display a modal for viewing event details, but show the hard-coded data.

  • Display at least 3 event filters, but do not implement them.

  • Display the event search, but do not implement it.

  • Use only Tailwind CSS classes to style your application.

Restrictions:

  • Do not load data from the database.

  • Do not store any event data in state or in variables/constants.

  • You may use state only for the modal.

  • You may not use state anywhere else in this milestone.

  • You may not use data- props/attributes.

  • Use only Tailwind CSS for styling.

  • You may not use the style prop.

  • You may not write your own CSS.

  • You may not create your own CSS classes.

  • You may not use the @apply directive to import Tailwind CSS classes.

Professionalism:

Professionalism means meeting the client's requirements. Not doing less and not do more. Your submission should meet the requirements specified for this part and no more.

You are required to implement your project using the methods taught in class prior to the release of this milestone.

Any custom CSS with the use of explicitly defined CSS property value pairs is prohibited and will result in 0 credit for this part.

Loading data from the database or storing data in variables/constants is prohibited and will result in 0 credit for this part.

Any interactivity functionality that is not implemented with state and event handlers is prohibited and will result in 0 credit for this part. (i.e. use of data- props/attributes or similar is prohibited.)

If any functionality exists not covered in class up to this point, 0 credit is provided for this part.

Instructions​

  1. Assemble your community events SPA design using the component library you created in Part II.

    The "bones" of your SPA should use the component library. However, code event specific components as needed to use in your library components if necessary.

    Hard-code all data directly in the components. Do load any data from the database or from variables/constants.

    Do not use state to store any data. You may only use state for the modal.

  2. Professionally style your entire SPA using TailwindCSS.

    Your final draft should be a cohesive design that employs visual design principles and the design patterns and trends we explored in class.

  3. Check your work.

    Carefully review the requirements and check that your work meets them.

    Your draft web application should be completely and professionally styled. There should be 3 identical events displayed. A modal should open for viewing event details. No other functionality should be implemented.

Submission​

Stage, commit and push all changed files in your Git repository to the GitHub server. (All commits should reside on the main branch.)

Complete the submission form for p2m2 to submit the assignment.

Note: The submission form asks you to check your submission. Checking your work will ensure you receive credit for this assignment. We ask you to check your submission because this is where some students lose points. It's easy to forget something and checking your work prevents the heartache of getting a 0 because your submission wasn't submitted in a way that we can access and grade it.

Contributors​

Copyright © 2024 - 2026:

  • Kyle Harms
Last updated on