Widget Wizard

WidgetWizard allows users to create an account to login and build a customizable dashboard with their favorite widgets, provided a diverse dropdown list of widgets to choose from. The project was built using the MERN stack.


CLICK HERE to access the deployed application.




When I enter the homepage, I am presented with a user friendly interface, with a nicely styled logo and pallete, an alert to create an account, a ‘Login/Sign Up’ button, a default widget “Astronomy Picture of the Day” and a footer to access information about the developers.

Home Page

When I click on the ‘Login/Sign Up’ button, I am presented with a modal with a tab to login or sign up. To sign up I need to input my username, email, and password. To login, I need to enter is the created username and password. Then I press sign up or login and it will redirect me to the dashboard page.

Signup Form Login Form

When I login for the first time, I am presented with an empty dashboard and a ‘Add Widget’ button that opens a drop-down menu that displays a diverse list of widgets that I can click to add to my dashboard.

Widget dropdown

When I select a widget, it will be displayed on my dashboard and I can drag the widget using ‘Drag from here’ and position the widget anywhere I would like within the dashboard.


I am allowed to add as many widgets as I would like to, but each widget can be added only once and the widgets added will be saved even upon refresh.


When I no longer want a widget on my dashboard, I can click the ‘Delete’ button in its card to delete it.

Delete Widget

When I am in my dashboard page, I can click the Logout button if I want to sign out and it will redirect me to the home page.


Technologies Used

  • Javascript
  • Fetch
  • Bootstrap
  • Google Slides (wireframe)
  • Google Fonts
  • React
  • Vite
  • Node
  • Express
  • User Authentication – bcrypt
  • GraphQL
  • Apollo Server
  • MongoDB

JavaScript Libraries



Justin Choi

Minhee Chung

Ryan Payne

Virginia Freitas


We have received advice from the UC Berkeley Extension tutors Joem Casusi, James Harding and Kyle Vance on debugging our code. We also referenced the official documentation of most of the technologies listed above.


View Github