React.js Website Builder

🖤 created by BlackTminOil

This app was created using React.js and demonstrates conceptions of SPA and PWA applications.

General principles of the application work

To ensure the persistence of data within one browser used Localstorage. Data in Redux is automatically saved in localstorage using Redux-persist.

The application allows creat new sites and presist them in history. With the ability to view and edit previously created sites. The maximum possible number of saved sites is limited by the size of LocalStorage.

Each prototype of the site is an object containing: fields with meta information (ID, site name, creation time, etc.), an object with the current settings of the design and an array with a list of used blocks.

Such arcitecture allows flexibly scale the application, easily add new entities (for example, user, etc.)

Inline editing text in blocks is made without using libraries on pure React. To display on the page and the ability to persist storage, all images are encoded in Base64.

• 🌈 to behold all magic of redux, installation of browser extencion Redux DevTools is highly recommended 🦄

List of used technologies and tools

• React
• react-router-dom
• Redux Toolkit + redux-persist +
• Material UI
• Images StorySet.com
• Github Pages

Launching the project

1. Uploading a project to a local machine

   git clone https://github.com/black-tmin-oil/website-builder-react.git
   

2. Install dependencies

   yarn add
   

3. Run project

   from the root directory of the project:

   yarn start
   

   After that, the application will be available at localhost: 3000.

TODO

• add user auth with saving in firebase
• update ui design