Project

Profile Page for a SaaS App

Create a profile page that allows users to view and update their personal and account information.

Frontend
</>
HTML/CSS
3-5 hours

Sign Up

About This Project

Instructions

Your goal is to create a comprehensive profile page that allows users to view and edit their account information, profile picture, and account settings. The project focuses on intuitive design and seamless interaction to enhance the user experience.

You may use any tools you wish in order to build the frontend.

Our focus in this application is to practice responsive design, basic form validation, and saving information. We have provided a JSON file with sample user information that you can use to validate against and populate your user profiles.

Objectives

  • Create a Comprehensive User Profile Page: Develop a page where users can view and edit their name, title, location, contact number, bio, and profile picture.
  • Implement Interactivity: Use JavaScript to add functionality for editing user details and interacting with the backend services to update user information.
  • Ensure Responsiveness: Design the profile page to be responsive across different devices, ensuring a consistent and engaging user experience regardless of the device used.

User Stories

  1. View Personal Information: As a user, I want to view my personal information in a readable format that's easy to scan quickly.
  2. Edit Profile Information: As a user, I want to be able to edit my profile information, to keep information up to date.
  3. Responsive Design: As a user, I expect the user profile page to provide a seamless experience on both desktop and mobile devices, adapting gracefully to different screen sizes.

Acceptance Criteria

  • Personal Information Display and Edit: The page must display the user's current information, and reflect changes to the profile when the form is submitted.
  • Responsive Layout: The profile page should be fully responsive, displaying correctly on desktops and smartphones.
  • Hover States: All buttons and other links need hover states.
  • Interactivity and Dynamic Data: All changes to personal information and settings must be updated in real-time, with appropriate feedback and validation.

Stretch Goals

To go above and beyond, consider choosing one or more of the following objectives:

  • Theme Customization: Allow users to customize the visual appearance of their profile, including a toggle between light and dark mode.
  • Routing: Implement routing that passes in the appropriate user profile information from the provided json file.
  • Editor vs. Viewer State: Make user profiles visible to other users in the organization. If a user accessing the page is not the owner of the account, hide the "Edit Profile" link and remove the "Add Task" button.
  • Profile Picture Handling: Allow users to upload a new profile picture, with the system handling image cropping and sizing.

Starter Materials

To help you get started, you're equipped with the following assets:

  • Project Images: Necessary image files, including Buggsy's logo and icons, are provided. The files are in svg format to improve performance.
  • Style Guide: A comprehensive guide provided by Buggsy, detailing color schemes, fonts, and other design elements to align your navigation menu with the brand's aesthetic.
  • Preview Images: Visual benchmarks to guide your design to completion.
  • Figma File: Leverage design files in Figma as a blueprint for your development efforts.

Let's Start Building!

This project and many others like it are available with a Curricular account. Get started today.

Sign Up

Already have an account? Sign In

Includes

  • Detailed User Stories
  • Figma Design File
  • Image files of the target layout
  • Starter Code and README file

Skills Practiced

  • Frontend Fundamentals: Deepen your expertise in HTML, CSS, and JavaScript, with a focus on responsive design and accessibility.
  • Intermediate JavaScript Interactivity: Fetching, displaying, and updating data, DOM manipulation and event-handling, state management, and form validation.
  • UX/UI Design: Develop a keen eye for user-friendly and aesthetically pleasing interfaces. And refine your ability to build a pixel-perfect frontend from a given design spec and mockup.
  • Version Control: Use Git for version control, documenting your development process and changes.

FAQ

Why should I build this project instead of one from scratch?

In a professional context, you're rarely starting from scratch. Curricular Projects are designed to give you a constrained real world problem so you can focus on practicing the essential skills you'll use as a professional developer, and to surface specific areas to continue studying.

Can I get help if I'm stuck on a project?

Our projects are designed to be a real world assessment of your skills, like the take home assignment during a job interview. Getting yourself unstuck is part of the skills measured. As a result, we offer very little help and direction.

However, if you encounter issues with the setup, or if you find something isn't working right that should be working, you can contact us at support@curricular.dev and we'll help you out.

Do you provide official solutions to projects?

We do not provide official solutions to projects. There are many ways to solve each of our projects. Coding is a journey, so our goal isn't for you to get the "right answer." Instead, our projects are about you flexing your skills to arrive at a solution, practicing talking about your code, and giving you helpful feedback on ways to improve.

Can I get feedback on my work?

Currently, we only provide feedback on capstone projects, through our Code Review service.

The Code Review is a premium service available as an add-on purchase, combining an in-depth review of your code and a practice interview. If your project passes the review and meets all specifications, you'll receive a certificate of completion.

Where can I ask a question that isn't answered here?

Email us at support@curricular.dev or chat with us.

It's Time to Level Up

Start Building