React-Bricks , Create a site in 20min

Moez Mustafa
5 min readAug 20, 2022

--

React Bricks Cover image

Wanna create a site that is ,powered by Next.js , with sever-side-rendering ,React components and Tailwind CSS for styling . Along with the power of Typescript ?

What is React Bricks ?

React Bricks is a content material administration system that lets builders create a visible website builder content material editors can use code-free.

At First Glance :

Coming from the world of headless CMS (wordpress) , i had pre- cognitive bias about the workings of React Bricks . As it too at first glance appeared to be something similar to that of Wix . But i was wrong upfront . As when is start working with it down right from the start i was amazed by what i can do with react bricks .

Lets Start

1 . Create an account and setup your repl.it IDE

2. Create a React-Bricks account , using shell setup back-end inside repl project .

3. Welcome to React-Bricks .

4. Welcome to the PlayGround .

5. Building Blocks of your site

6 . Final Tweaks

1 . Create an account and setup your repl.it IDE

To keep the final outputs uniform , we will use repl.it

side bar of the repl.it site

Go to this link , https://replit.com/~

Create an account or Login

Hit the create button , select Node.js click ‘Create Repl’ .

pop-up window to create a react template

inside you’ll see this ,

File structure of the app

on your right most side you will see these two tabs .

You have console and Shell . Inside Shell you have to configure ‘git’ . Without this step you cannot use the react-bricks .

git config --global user.email "you@example.com"

git config --global user.name "Your Name"

2. Create a React-Bricks account , using shell setup back-end inside repl project .

Go to the React-Bricks site , and create an account . Keep this email and password . You will need this to log-in via the shell inside your repl.

Login site of the React Bricks

after login you’ll see this , create a new app

Creating an app using the Shell

Now select a ‘Website and Blog with Tailwind’ .

selecting the name for the App , Project and Folder

Select the ‘Next.js’ as framework . and press Enter .

selecting a framework

Press ‘Y’ and load the default content .

Sit back and let these load ….

Wohoo 🚀 , if you see this the app has been created successfully .

To run the app : cd into the app folder that you have created ,

cd 'your-app-folder-name'

and the enter the following command :

yarn dev

This window will appear , now if you see on the top right you’ll find the encircled icon . Click on it open the React-Bricks app in a seprate window .

3. Welcome to React-Bricks

this page was created via CLI

Hey , isnt this exciting already ? this is your React Bricks page . This can be tweaked in anyway you want . So lets dive in .

Click the ‘Edit Content’ button to open the gates to Narnia , Lol .

youll be asked to login , enter your React-Bricks .

Login and Lets Gooooooo !

4. Welcome to the PlayGround

See that page heading , see that little icon , click it . Give a name to you page .

Creating the React-Bricks page.

This is your sandbox , you can build anything , no code needed .

The sandbox of React-Bricks

5. Building Blocks of your site

Click the ‘Add your first block’ . Look at that list of pre-made , pre-coded blocks that you can use in your site .

Play around with the Blocks and Create something Awesome.

Get the Preview Link

Wohoooo , The site is alive 🚀🚀🚀🚀

6 . Final Tweaks

That header and footer looks ugly though , right ?

Lets tweak our code in the Repl and get rid of them .

Hop into you Repl , get inside the project folder .

You’ll see the components folder .

Inside components youll find ‘layout.tsx’ . Open it …

Now just remove the < Header /> and <Footer /> and you are done .

Those ugly header and footer are gone .

But now how you’ll get into your Editor ?

youll have this url at the top .

https://react-bricks.username.repl.co/

Just add /admin/editor at the end of it .

https://react-bricks.username.repl.co/admin/editor

Now play with you new toy , customize it to your taste and you are good to go .

So this was how you can create a site that is ,powered by Next.js , with sever-side-rendering ,React components and Tailwind CSS for styling . Along with the power of Typescript.

--

--

Moez Mustafa
Moez Mustafa

Written by Moez Mustafa

Developer who Designs, Building Communities with Google Microsoft and LFX/CNCF.

Responses (1)