https://github.com/audreylin/mernboiler
Just a MERN boiler so I don't have to keep rewriting this part.
https://github.com/audreylin/mernboiler
Last synced: 4 months ago
JSON representation
Just a MERN boiler so I don't have to keep rewriting this part.
- Host: GitHub
- URL: https://github.com/audreylin/mernboiler
- Owner: AudreyLin
- Created: 2022-03-05T04:39:53.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-10T00:20:21.000Z (almost 4 years ago)
- Last Synced: 2025-02-08T19:47:58.853Z (over 1 year ago)
- Language: CSS
- Size: 353 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MERN Boilerplate w/ Layout & some basic pages
A MERN Boilerplate for anyone who wants to use it in their browser project.
It comes with a pre-set, responsive navigation, and basic pages. The pages include the home/landing page, about, and contact pages, all will be blank, but they're just there as place holders for the navigation.
Everything can be edited to suit your preferences. I just made this one so I don't have to keep remaking it for my MERN browser projects.
## Features
- Google Fonts: I used poppins for this one, but you can change it.
- Express Server that listens on port set both on the server.js file & .env config for dotenv
- Preset directories set up for controllers, routes, models, and config
- create-react-app frontend
- scripts preset (see package.json)
- React-router v6 route setup
- Responsive Navigation
- customizable
- scalable
- preset, but customizeable light/dark theme toggle
- Set up for the react@18 and react-dom@18 update
## Acknowledgements
- [Brad Traversy Udemy Course](https://www.udemy.com/share/101WIo3@66V0VcDfhzVyIAwG7vHEEqVFlCTus0K5Xr-gbkQw4sPXwdNZTH9cpdHmAwsKxhv6/)
- [Academind Udemy Course](https://www.udemy.com/share/102g8S3@994-m03A3GqD84iBhDN-9po4Brn6wzAILBrp114OZ445cXFa2XdY70x4FaEcjJx9/)
- [Awesome Readme Templates](https://awesomeopensource.com/project/elangosundar/awesome-README-templates)
- [Awesome README](https://github.com/matiassingers/awesome-readme)
- [How to write a Good readme](https://bulldogjob.com/news/449-how-to-write-a-good-readme-for-your-github-project)
- [Kevin Powell, Scrimba, FrontendMentor.io tutorial](https://scrimba.com/learn/spacetravel)
## Generate Favicons
1. [Generate your favicon files](https://realfavicongenerator.net/)
2. Extract the package download into "./frontend/public" directory
3. Insert the given code into the head section of the "./frontend/public/index.html" file
## Light/Dark Theme Toggle Customization
You can change your theme colors in the "./frontend/src/index.css" file's CSS variables
## Google Fonts
-[Google Fonts](https://fonts.google.com/)
You can choose your fonts, then insert the code into the head section of the "./frontend/public/index.html" file
## DotEnv & Environment Variables
-[DotENV NPM](https://www.npmjs.com/package/dotenv)
Add your environment variables to the .env file. See the 'env.md' file in '/backend/config/env.md'.
## Install dependencies
```
npm install
cd frontend
npm install
```
## Run Project
### frontend
```npm run frontend```
### backend
```npm run server```
### dev Concurrently run front and back
```npm run dev```
## Proxying API requests
(Proxying API requests in development)[https://create-react-app.dev/docs/proxying-api-requests-in-development/]