Building Masite: A Portfolio Website Builder — Part 2: Setting up the Project in React

3 min readSep 26, 2024

This 8 part series focuses on building Masite: A Portfolio Website Builder. Link to the website: https://masite-portfolio-website-builder.vercel.app/

In this second installment of the Building Masite series, we dive into the technical foundations of the project — setting up Masite in React.

By the end of this article, you’ll have a clear understanding of how to initialize the project and organize the codebase.

Setting Up the Project in React

When I first started working on Masite: A Portfolio Website Builder, React was my go-to framework.

Known for its flexibility, performance, and vast ecosystem, React was the perfect choice to rapidly prototype and build out the initial version of the project.

My goal was to create a dynamic, interactive, and customizable platform where users could design and display their portfolios without needing in-depth technical knowledge.

1. Project Initialization: Getting Started with Create React App

To kick things off, I used Create React App (CRA) to scaffold the initial project. CRA is a boilerplate that helps set up a new React project quickly, without having to worry about configuration, build tools, or the complexities of setting up Webpack.

npx create-react-app react-portfolio
cd react-portfolio

This command quickly generated a starter project structure:

At this point, the application was ready to run, and the foundational pieces were in place.

2. Technology Stack: React and Key Tools

I chose React because of its ease of use, reusable component structure, and seamless integration with other libraries. Here’s the core stack I used initially:

React: The core framework for building the frontend of the portfolio builder.
Styled-Components: To handle component-level CSS for dynamic and theme-based styling.
NextJS: When we will further enhance this website, we will use NextJS because this will improve the loading time of pages and makes the content SEO-friendly, which is critical for a portfolio site where users want their portfolios to rank in search engines also it would provide user authentication for the users

3. Core Features and Component Setup

The main components for the portfolio builder were designed to represent different sections of a portfolio. These sections would be dynamically populated using data fetched from an API. Here’s the core structure of the application:

Each folder represents a key section of the portfolio. Now, let’s take a look at how I implemented these components and connected them in the main App component.

import React from 'react';
import './App.css';
import appConfig from './app.config.js'
import './components/Header/common.css';
import Header from './components/Header/header.jsx'; 
import './components/Header/header.css';

function App() {
  return (
    <div className="App">
      <Header />
    </div>
  );
}

export default App;

Creating an app.config file

Apart from all the above files, we will also create an app.config file through which the user can modify the details of the website.

To begin, we are just creating 4 Navigation Elements:

const appConfig = {
    links: ["About", "Articles", "Project", "Presentations"],
};

export default appConfig;

Conclusion

In this article, we’ve covered the basics of setting up the Masite portfolio builder in React and organizing the codebase.

In the next part of this series, we’ll explore Design and User Interface (UI), where we’ll focus on building a responsive and customizable UI that adapts to different screen sizes.

We’ll dive deep into using CSS Grid, Flexbox, and media queries to ensure that Masite portfolios look stunning across all devices.