Web Development

Bootcamp Notes – Portfolio Project – 2021

Portfolio Project

Portfolio Project: Bootstrap

Your Portfolio Page:

Follow the guidance provided in this article to plan for the design of a Portfolio Page where you can showcase your Bootstrap Portfolio Project and other projects.

Interesting examples of Portfolio Pages:

Portfolio Project Examples:

  • Red Elm Café: simple website with a menu,
  • Living Room Café: simple website with a menu + event booking,
  • Anthem: more advanced website with multiple locations, menus, event booking and even a “school”.
  • Fellow Spokane: Simple layout, membership plans (eCommerce), schedule form
  • Union Club Tacoma: Advanced layout, membership plans (eCommerce) with event booking and schedule form

General development plan:

  1. During the Bootstrap course: create a static, responsive version of the website.
  2. During the React course: make the data dynamic (menus, locations, events, memberships etc…).
  3. During the React Native course: turn the website into a mobile app.
  4. During the NodeJS, Express, MongoDB course: move the data to MongoDB, build the REST APIs.

Portfolio Project: Instructions (Bootstrap)

Objectives and Outcomes

Now that you are more clear about your project idea, it’s time to conceive how your project is going to look like for the end-users. This is the time to design the user interface and the flow of your application.

Project Title

1. Introduction

  • Give a brief introduction to your project and the list of features. Summarize in a few sentences what you proposed in the ideation report.

2. User Interface Design and Prototype

  • Give some sample user interface layouts for your application. You can use either wireframe diagrams or prototyping tools to construct the mock representations of your UI design
  • Briefly explain the rationale behind designing your UI and how it is geared towards supporting the list of features for your application.

3. Navigation Structure

  • Give a brief overview of the navigation structure for your application.
  • Briefly indicate a typical flow of your application in terms of user experience. You can use any way of representing the flow. You can also construct a prototype using one of the prototyping tools to illustrate this.

4. References

  • Provide any references relevant to the report.

Portfolio Project: Additional Resources

Wireframing, Mockups and UI Design

UI Templates

Information Architecture

5th Week Portfolio Project Bootstrap Notes:

Objectives:

  • Document the process of starting from an idea and reaching the conclusion of the project
  • Learn lessons from the process in understanding what worked and what did not, and being able to make intelligent choices in the future based on the experience
  • Understand the design and development process through the practice.

Project Title

1. Introduction

  • Briefly describe the key features of your project.

2. Design and Implementation

Give a detailed description of the design and implementation of your project.

eBay Electronics: Best tech for way less - Up to 50% off and free shipping

In particular, this section should contain:

  • Details of how you converted from design to the actual realization of your project in terms of implementing the code.
  • Any choices that you made, and any modifications that you made to the design, in response to difficulties that you might have encountered while implementing the project.
  • A brief discussion of various components that you used in implementing your project, and the reasons you chose them over alternatives.
  • Include a few screenshots of your website in the report.

3. Conclusions

  • Discuss what you personally learned from your project.
  • Discuss the best features and the shortcomings of the project.
  • Discuss any choices that you might have made differently, in hindsight after completing the project.

Portfolio Project – React (Part 1)

Objectives

The first step in your journey towards the implementation of the Project Portfolio using React is to envision how you will evolve your project from the current Bootstrap implementation to a React implementation.

At the end of this step you should be able to:

  • Reflect on what you have developed so far using Bootstrap and what React will bring to your solution
  • Initialize your Portfolio Project using the create-react-app CLI
  • Plan for the transition of your current Bootstrap by listing the React Components you will need to develop
  • Assign ownership of the React Components across your Project Portfolio Team

Instructions

In this assignment, you will submit a written report describing how you will transition your Bootstrap project to a React project.

It is understood that you will not have a complete idea of React’s capabilities at this point in your course. Make the best guess that you can with your understanding of React at this point, recognizing that the list of components and team responsibilities may evolve in the coming weeks.

Your report should contain answers to the following:

1. How your project will benefit from React
  • What are the main differences between Bootstrap and React?
  • What will React allow you to do that would have been difficult with Bootstrap?

2. Expected List of React Components

  • A brief list of the React Components you will need to develop for your application
  • Brief justifications for including these components
3. Team responsibilities
  • Which team member will own the development of which React Component?

General Resources

Topics to cover in your report:

1. How your project will benefit from React
  • What are the main differences between Bootstrap and React?
  • What will React allow you to do that would have been difficult with Bootstrap?
2. Expected List of React Components
  • A brief list of the React Components you will need to develop for your application
  • Brief justifications for including these components
3. Team responsibilities
  • Which team member will own the development of which React Component?

Portfolio Project – React and React Native

Project Title

1. Introduction

  • Give a brief introduction to your project and the list of features, with a special focus on data management (add/change/delete).

2. User Interface Design and Prototype

  • Give some sample user interface layouts for your application. You can use either wireframe diagrams or prototyping tools to construct the mock representations of your UI design.
  • Briefly explain the rationale behind designing your UI and how it is geared towards supporting the list of features for your application.

3. Navigation Structure

  • Give a brief overview of the navigation structure for your application.
  • Briefly indicate a typical flow of your application in terms of user experience. You can use any way of representing the flow. You can also construct a prototype using one of the prototyping tools to illustrate this.
  • Indicate how your React components are connected to one another (routing).

4. References

  • Provide any references relevant to the report.

Additional References:

Wireframing, Mockups and UI Design

UI Templates

Information Architecture

Coding Your Project

  • Think of how you will convert your design to the actual realization of your project in terms of implementing the code.
  • Don’t hesitate to make modifications to the design, in response to difficulties that you might encounter while developing the project.
  • Plan for the use of components, any public APIs, and data structures that you will use in implementing your project.

 

 

Related Posts

You May Have Missed