The fastest way to boostrap your React & Next.js apps!

You can view this documentation on our website too! Check it out here.

Features

1. Bulma
2. Next.js
3. React Hooks Form
4. Firebase Authentication
5. Firestore Database
6. Formspree Integration
7. Google Analytics Integration
8. ESLint + Prettier Configuration

Project Structure

The application is neatly structured into folders representing their individual responsibility.

1. components directory contains all the frontend React components used to render the app
2. config directory contains all the configuration you will be doing to change the various configs (e.g. email or text copies) that components pull the information from. It also contains UserContext which takes care of the authentication mechanism in the app.
3. layouts directory define layouts for the rendering of the pages. It helps to abstract repetitive layout structure code into a component of itself.
4. lib directory contains assisting services that help to connect to both Firebase Authentication and Firestore.
5. pages contains all the pages that will be rendered by the app. This is where our components are pieced together. _app.js is the root of the app where it is initialised.
6. public directory is where the images and static assets of the site belong to.
7. styles directory just contains one file - globals.scss which has global styles for the entire app.
8. .env is the file to put in your environment variables (secrets that will not be shared with anyone else)

Getting Started

All the primary configurations can be done under the config folder which contains all the various information the app uses to run (e.g. emails or text to show).

Firebase Configurations

1. Setup a Firebase project at Firebase Console

2. Setup a Firebase project at Firebase Console

3. Create new project by clicking Add Project button

4. Goto Project settings by clicking the Gear Icon (), next to the Project overview

5. Under General tab, goto Your apps section, click Add app button

6. Please click the web button () on the Add Firebase to your app dialogue window

7. Register your app by giving app nickname and click Register app button

8. Finally, copy and save the Firebase SDK configuration into your project .env file e.g:

   Note: Do note that when you sign up, the password needs to be at least 6 characters when you sign up and email sign ups must be unique.

Formspree Configurations

1. Register for an account at Formspree.
2. Copy the email you registered with in Step 1.
3. Under config/global.js, update the email key under contactFormSubmissions to be the email the contact form submissions will be sent to.

Google Analytics

1. Create a new projects on the Google Analyics console. Check this link for more information: https://support.google.com/analytics/answer/1008080?hl=en.
2. Get the tracking code.
3. Navigate to /config/globals.js and paste your tracking code under the key googleAnalyticsTrackingId.

Your Google Tracking ID will automatically be added to every page.

Formatting and Linting

Supercharge comes out of the box with ESLint and Prettier configured. If you prefer to have your own customisation, you can edit .eslintrc.json and .prettierrc.json to edit the respective configurations.

Running the Application

npm install
npm run dev
# or
yarn
yarn dev

This will open up the app running on port 3000. Visit http://localhost:3000 to see it in action!

To build locally and see your production version:

xxxxxxxxxx
npm run build
npm run start
# or
yarn build
yarn start

Configuring Content

It is extremely easy to configure the various content you see on the pages. Navigate to /config folder to view all the various configurations for the components.

Components are made in a dynamic way. For example, if you need to add multiple FAQ items, simply go to /config/faq.js and add your FAQs in a list of question and answer JSON object format. The FAQ component will dynamically fetching these content and render them.

The same applies for all other components such as testimonials or features. You can edit the JSON structure present in /config. The components have been built in a dynamic way such that it adapts and renders based on the JSON. You need not worry about styling or positioning.

Remember that global configs such as your brand name, social media contacts etc. can be placed under /config/global.js.

Building and Deploying

We will be using Vercel for deployment simply because the platform itself was created for use with Next.js and provides an excellent and developer-friendly experience of hosting your site for free!

1. Push your project to Github
2. Go to Vercel
3. Click on "Import Project"
4. Click on "Import Git Repository"
5. Follow the guided steps to build and deploy your site
6. Remember to add all your .env secrets during configuration

Contact

If you need help with any of the configurations or have some feedback for us, reach out to us at supercharge.dev@gmail.com.