create-new-startup v1.3.3
Follow on Twitter \ Join Reddit Community
A React framework for startup founders to test ideas super fast while writing reusable code for their next pivot.
Get Started Immediately
npx create-new-startup YourStartupName
Example
npx create-new-startup PivotJs
Target User
- Your #1 goal is to acquire Paying Customers. You care little about SSR, CSR or RSC lol.
- You aim to write code you can share across projects.
- You've learnt that adding more features won't bring in users. Talking to customers and analytics will.
- You're an indie-hacker who can learn/knows Express, React and Redux.
Table of Contents
Framework Features
Style Guide \
Redux Cheatsheet \
RtkQuery Cheatsheet
Framework Features
Frontend
- Redux State Management with custom code completion in VScode
- RTKQuery API code generators and end-point injectors
- Customizable webpack.config
- Built-in analytics to detect user activity
Backend
- Express backend
- Optional MongoDB bindings
- Plugin ecosystem
- Server-side rendering
Style Guide
Disclaimer:
You MUST follow a design pattern to make your code reusable. Don't worry about OOP or functional programming. This guide defines a Directory Structure for reusable components.
Goal:
We aim to ensure entire routes can be reused. Routes are pages.
Every page shares a folder with its components, RTKQuery API calls and Redux states.
Frontend Directory Tree
- Pages - ChosenNamePage Folder ie. "HomePage, LandingPage..." - ChosenName.jsx - UI logic and declare nested routes(if needed) - Components - Stuff like sidebars, navs, forms... - SubPages Folder - Write code for nested routes BUT maintain state in ChosenNameReducer.js and define endpoints in ChosenNameEndpoints.js defined below. - Redux Folder - ChosenNameReducer.js - Redux state management - ChosenNameEndpoints.js - RTKQuery API calls
- Redux Folder
- ReduxStore.js - configure Redux store.
- ReduxApi.js - ONLY place you write
createAPI
. Endpoints should be empty - App.js - Main routes ie. "home...landing...store...etc" defined here
- index.js
- Redux Provider and CSS variables MUST be defined here
Backend Directory Tree
- WIP
Redux Cheatsheet
- Redux is mostly boiler plate. This framework offers code code completion in VScode.
- pvtSlice - Generates a Redux slice and and its exports
- pvtBool - Generates a Boolean initial state variable and true/false reducers
- pvtList - Generates a List initial state variable and add/remove reducers
- pvtVar - Generates a general initial state variable. Default is string but can be anything you want
- pvtAl - Generates a functional component with imports for basic analytics
RTKQuery Cheatsheet
- pvtApi - Generates an API slice and exports. Only need to run once in a project.
- pvtInject - Generates an Endpoint Injector for ReduxApi.js
- pvtPost - Generates a POST mutation and its exports.
pvtGet - Generates a GET query and its exports.
Milestones
- Test on Windows and Mac.
- Get Listed on Styled-Components website
- Get listed by the React dev team as a production-grade framework.
Author
Murage Kibicho \ Branford College \ New Haven, Connecticut
6 months ago
6 months ago
6 months ago
6 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago