Code Monkey home page Code Monkey logo

thefront-preview's Introduction

Material React Landing Pages Kit made with Material-UI's components, React and of course create-react-app to boost your app development process! A professional React Kit that comes with plenty of ready-to-use Material-UI components that will help you to build faster & beautiful Fontend pages. Each component is fully customizable, responsive and easy to integrate.

Built with

  • React
  • Material-UI v4

Quick start with React Scripts

  • Download the theme
  • Make sure your NodeJS and npm versions are up to date for React 16.8.6
  • Install dependencies: npm install
  • Start the server: npm run start
  • Views are on: localhost:3000
  • Build on production: npm run build

Folder structure

In the root folder there are 2 folders:

  • public Here are the public assets, images and index.html file.
  • src Here is the main business logic of the theme.
  • |----components The reusable and stand-alone components are stored here, by following Atomic Design Methodology
  • |----|----atoms These are small functional components that are not using any other atomic components
  • |----|----molecules Tese are those functional components which have dependencies from other atoms
  • |----|----organisms These are the functional components that are using other molecules and atoms
  • |----layouts
  • |----|----Main The main layout: header navigation, the main container and footer part
  • |----|----Minimal The minimal layout
  • |----theme In this folder there are overrides of the default color palette and typography coming from MUI
  • |----views All the views/pages that are available. Here are the combination and composition of re-usable components and pages representations.

Landing Pages Built For Customization

theFront landing page examples can be used out of the box, but since they’re built on flexible components, you can also create new pages all your own with ease. Copy-paste a section here, a component there, switch up a few variables, and you have an entirely new landing!

In the extended version of the kit you will get:

The full list of pages

  • More than 45 pages
  • 300+ component compositions
  • 30+ stand-alone components
  • create-react-app scripts support
  • NextJS and server side rendering support

Development Highlights

We built Thefront to make you be able to customize and extend our components as simple as the Material UI core itself.

  • Component-centric atomic design architechture
  • Customization made easy with stand alone components
  • Browsersync live reload
  • Fully responsive on all modern browsers
  • Rich documentation with code samples and parameters/options

Design Highlights

theFront was designed as a rich system from the start, which is reflected in both the end result and the original design.

  • Beautiful, modern style flexible enough to suit most brands
  • Included Sketch design file
  • Type styles, color styles, and components for easy file-wide changes
  • All images are included with a free-to-use license
  • Icon set provided by Font Awesome Kit

MUI Documentation

The full documentation for the React Material Kit can be found here.

Upgrade to PRO

You can updrade to use the PRO version and access to all the pages & components here.

Contact Us

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.