Fullstack Company Website Template

Template Website and Contact Form

React JS

Vite

Redux

Python Flask

Flask Mail

Flask Limiter

Redis

---

---

Live preview: https://bgtti.github.io/company-website-template

---

Table of Contents

• Introduction
  • Functionality
  • Tech Stack and Tools
• Installation
• Project Structure and Documentation
  • Frontend-ReactJS
  • Backend-Flask
  • readmeAssets
• The App
• About and license

Introduction

A full-stack boilerplate project featuring homepage, contact form functionality and more. Built with Flask and React.js.

This monorepo contains separate frontend and backend apps, structured to help you kickstart a fullstack website.

The codebase is clean and modular, with a straightforward folder structure and clear documentation, making it easy to build upon and extend with your own features.

Fuctionality

This project contains the base functionality and styling for:

• Homepage
• About page
• What We Do / Services / Portfolio page
• Contact page
• Privacy Policy page
• Impressum / Legal page
• 404 Page

Tech Stack and Tools

Backend:

• Flask-Mail – contact form forwarding
• Json Schema – validation
• Flask-limiter – rate-limiter
• Redis – to be used with rate -limiter

Frontend:

• React Router – client-side routing
• Redux Toolkit – state management
• Axios – HTTP requests
• PropTypes – prop validation

Styling:

Plain CSS (no frameworks), UI built mobile-first.

Installation

1. Clone this repository

More information on how to clone this repository available here

2. Open the Back-end and Front-end terminals

If using Visual Studio Code, right-click on each folder and select Open in Integraded Terminal.

2. Install dependencies

Create a virtual environment. Next, install the app dependencies for both the Back- and Front-end apps.

Backend-Flask

cd Backend-Flask
python -m venv env
.\env\Scripts\activate
pip install -r requirements.txt

Frontend-ReactJS

cd Frontend-ReactJS
npm install

3. Create an env file

You can create a .env file in the root of the Backend-Flask folder, the content should be similar to that of the .env.example file provided. Replace the email credentials as indicated.

4. Run both apps

Backend-Flask

python run.py

Frontend-ReactJS

npm run dev

5. Enable the FE API handler

To test the email feature, you should first enable requests from the front end's API handler. Navigate to Frontend-ReactJS/src/api/handlers/contactSubmission.js and delete the following code:

//DELETE THIS PART BELLOW (BACKEND DE-ACTIVATION)
return Promise.resolve({
 response: true,
 message: "Message sent successfully."
});
//DELETE THIS PART ABOVE (SO EMAIL SENDING CAN WORK)

Project Structure and Documentation

This repo contains both the front- and back-ends of the application, and each app contains its own documentation (readme.md files). From the root directory, apart from the .gitignore and LICENSE, you will find the following folders:

Frontend-ReactJS

Contains the front-end part of the application. You can see detailed information about the front-end app in it's documentation.

Backend-Flask

Contains the back-end part of the application. You can see detailed information about the the server and testing in it's documentation.

readmeAssets

Contains the images used in this readme file.

The app

The apps contains basic website functionality and placeholder text/image thought to be used as a starter template in other Flask + React projects. Be certain to adapt the .env files and configuration data in both backend and front end prior to using.

About and license

This is the first draft of an app template in React/Flask.

This is a personal project completed by the author, which you are welcome to use and modify at your discretion.