company-website-template — Flask 启动器模板

SHA-256: 36862f400dda447889d499dfb2653e2885d1b01e307e3648a27405ccb6491709

2026-10-02T09:06:21.156Z

<div align="center">
  <br>
  <h1><b>Fullstack Company Website Template</b></h1>
  <strong>Template Website and Contact Form</strong>
</div>
<br>
<table align="center" style="border-collapse:separate;">
  <tr>
    <td style="background: #344955; border-radius:20px; border: 5px solid transparent"><small>React JS</small></td>
    <td style="background: #344955; border-radius:20px"><small>Vite</small></td>
    <td style="background: #344955; border-radius:20px"><small>Redux</small></td>
    <td style="background: #344955; border-radius:20px"><small>Python Flask</small></td>
    <td style="background: #344955; border-radius:20px"><small>Flask Mail</small></td>
    <td style="background: #344955; border-radius:20px"><small>Flask Limiter</small></td>
    <td style="background: #344955; border-radius:20px"><small>Redis</small></td>
  </tr>
</table>
<hr>

![Preview of app](readmeAssets/App_preview_gif.gif)
<hr>
Live preview: https://bgtti.github.io/company-website-template
<hr>

# Table of Contents
- [Introduction](#introduction)
   - [Functionality](#functionality)
   - [Tech Stack and Tools](#tech-stack-and-tools)
- [Installation](#installation)
- [Project Structure and Documentation](#project-structure-and-documentation)
   - [Frontend-ReactJS](#frontend-reactjs)
   - [Backend-Flask](#backend-flask)
   - [readmeAssets](#readmeassets)
- [The App](#the-app)
- [About and license](#about-and-license)
<br>

# 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

<details>
   <summary>1. Clone this repository</summary>

   >\
   > More information on how to clone this repository [available here](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository)
   ><br/>
</details>

<details>
   <summary>2. Open the Back-end and Front-end terminals</summary>

   >\
   > If using Visual Studio Code, right-click on each folder and select **Open in Integraded Terminal**.
   > 
   >![Preview of opening in terminal](readmeAssets/App_open_in_terminal.jpg)
   >
   ><br/>
</details>

<details>
   <summary>2. Install dependencies</summary>

   >\
   > Create a virtual environment.
   > Next, install the app dependencies for both the Back- and Front-end apps.
   >
   > **Backend-Flask**
   > ```pwsh
   >cd Backend-Flask
   >python -m venv env
   >.\env\Scripts\activate
   >pip install -r requirements.txt
   >```
   > **Frontend-ReactJS**
   > ```pwsh
   >cd Frontend-ReactJS
   >npm install
   >```
   ><br/>
</details>

<details>
   <summary>3. Create an env file</summary>

   >\
   > 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.
   > 
   ><br/>
</details>

<details>
   <summary>4. Run both apps</summary>

   >\
   > **Backend-Flask**
   > ```pwsh
   >python run.py
   >```
   > **Frontend-ReactJS**
   > ```pwsh
   >npm run dev
   >```
   > 
   >![Preview of terminal](readmeAssets/App_terminal.jpg)
   > 
   ><br/>
</details>
<br/>

<details>
   <summary>5. Enable the FE API handler</summary>

   >\
   >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:
   > ```pwsh
   >//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)
   >```
   > 
   >![Preview of code](readmeAssets/App_delete_FE_code.jpg)
   > 
   ><br/>
</details>

# 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](Frontend-ReactJS/README.md).

## 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](Backend-Flask/README.md).

## 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.