React & MUI library
This project aims to redesign a travel destination website using React and the MUI component library. We will utilise open-source components, customising them to our project’s needs. This workflow will streamline development and reduce build time.
Client
Edinburgh travel
( hypothetical project)
Responablity
Design interface
React code
Year
2025
Role
Front end devEloper
DELIVERABLES
Travel Homepage UI — React + MUI
Key objectives for the project included:
Design and code interactive web pages based on provided guidelines.
Create React components integrated with MUI’s pre-built components.
Apply visual design principles to digital, interactive environments.
Demonstrate a strong grasp of front-end production requirements and constraints
Research
I started by researching the types of content needed for an inviting travel-site homepage and identifying which elements to include.
Mock up
Mock up & Figma devs mode UI
Once I created the layout, I used Figma's built-in features to view the basic React code for each component. This was helpful and convenient for documenting the measurement requirements needed.
MUI library
I utilised the MUI (Material UI) library, an open-source library that implements Google's Material Design system. Each component contains React code, allowing me to customise it for my design needs while also helping to speed up the production process.
After deciding which components I needed from the MUI library, I began building the page in CodeSandbox. First, I added the necessary dependencies to the project, which allowed me to import each component without adding links to the HTML code.
After deciding which components I needed from the MUI library, I began building the page in CodeSandbox. First, I added the necessary dependencies to the project, which allowed me to import each component without adding links to the HTML code.
After deciding which components I needed from the MUI library, I began building the page in CodeSandbox. First, I added the necessary dependencies to the project, which allowed me to import each component without adding links to the HTML code.
After deciding which components I needed from the MUI library, I began building the page in CodeSandbox. First, I added the necessary dependencies to the project, which allowed me to import each component without adding links to the HTML code.
After deciding which components I needed from the MUI library, I began building the page in CodeSandbox. First, I added the necessary dependencies to the project, which allowed me to import each component without adding links to the HTML code.
Then I started building each React component based on my Figma design, importing the relevant parts from the MUI library. I created around 16–17 components using atomic design principles.
In this example, [info_button] is an atom that will be used in the carousel and other parts of the molecule. The smaller parts of the atom can be reused on many occasions.
Once I created all the components, I rendered them from App.js (component). For styling, I utilised the global theme and MUI’s createTheme feature to ensure consistent styling across the entire page.
Key Takeaways
Delivered a modern, promotional Edinburgh travel webpage with an engaging and visually appealing interface.
Successfully utilised the MUI library to build UI components, gaining practical experience in creating a front-end mock-up from a Figma design using React.
Applied atomic design principles to structure the UI system, resulting in reusable, scalable components and a more maintainable codebase.
Enhanced familiarity with MUI theming and styling through MUI’s
createThemefeature, ensuring a consistent look and feel across the interface.