Boiler Plate Web App with Working login, signup and auth

[Dreaded Launch]

DOWNLOAD BOTTOM OF DISCUSSION

Here is a boiler plate web app you can use, It has a working back end and front end. It is easy to understand because of all the comments too, This was made using RedWoodJS (Full stack JS FW). I have set up the database for you and you can run it locally to test it our, make changes etc. It also updates on any new changes it detects so its a "live page" if you want to call it that.

What you will need to run redwood:
Yarn
GitBash or anything that can run Yarn

File Structure:
(Taken from docs)
├── api
│ ├── db
│ │ └── schema.prisma
│ ├── dist
│ ├── src
│ │ ├── directives
│ │ │ ├── requireAuth
│ │ │ └── skipAuth
│ │ ├── functions
│ │ │ └── graphql.js
│ │ ├── graphql
│ │ ├── lib
│ │ │ ├── auth.js
│ │ │ ├── db.js
│ │ │ └── logger.js
│ │ └── services
│ └── types
│
├── scripts
│ └── seed.js
│
└── web
├── public
│ ├── favicon.png
│ ├── README.md
│ └── robots.txt
└── src
├── components
├── layouts
├── pages
│ ├── FatalErrorPage
│ │ └── FatalErrorPage.js
│ └── NotFoundPage
│ └── NotFoundPage.js
├── App.js
├── index.css
├── index.html
└── Routes.js
Explanation:
At the top level we have three directories, api, scripts and web. Redwood separates the backend (api) and frontend (web) concerns into their own paths in the codebase. (Yarn refers to these as "workspaces". In Redwood, we refer to them as "sides.") When you add packages going forward you'll need to specify which workspace they should go in.
scripts is meant to hold any Node scripts you may need to run from the command line that aren't directly related to the api or web sides. The file that's in there, seed.js is used to populate your database with any data that needs to exist for your app to run at all (maybe an admin user or site configuration).

The /api Directory​

Within api there are four directories:

• db contains the plumbing for the database:
  
  • schema.prisma contains the database schema (tables and columns)
  • After we add our first database table there will also be a SQLite database file named dev.db and a directory called migrations created for us. migrations contains the files that act as snapshots of the database schema changing over time.
• dist contains the compiled code for the api side and can be ignored when developing.
• src contains all your backend code. api/src contains five more directories:
  
  • directives will contain GraphQL schema directives for controlling access to queries and transforming values.
  • functions will contain any lambda functions your app needs in addition to the graphql.js file auto-generated by Redwood. This file is required to use the GraphQL API.
  • graphql contains your GraphQL schema written in a Schema Definition Language (the files will end in .sdl.js).
  • lib contains a few files:auth.js starts as a placeholder for adding auth functionality and has a couple of bare-bones functions in it to start, db.js instantiates the Prisma database client so we can talk to a database and logger.js which configures, well, logging. You can use this directory for other code related to the API side that doesn't really belong anywhere else.
  • services contains business logic related to your data. When you're querying or mutating data for GraphQL (known as resolvers), that code ends up here, but in a format that's reusable in other places in your application.
• And finally types contains automatically compiled GraphQL types and can be ignored during development

That's it for the backend.

The /web Directory​

• public contains assets not used by React components (they will be copied over unmodified to the final app's root directory):
  
  • favicon.png is the icon that goes in a browser tab when your page is open (apps start with the RedwoodJS logo).
  • README.md explains how, and when, to use the public folder for static assets. It also covers best practices for importing assets within components via Webpack. You can also read this README.md file on GitHub.
  • robots.txt can be used to control what web indexers are allowed to do.
• src contains several subdirectories:
  
  • components contains your traditional React components as well as Redwood Cells (more about those soon).
  • layouts contain HTML/components that wrap your content and are shared across Pages.
  • pages contain components and are optionally wrapped inside Layoutsand are the "landing page" for a given URL (a URL like /articles/hello-world will map to one page and /contact-us will map to another). There are two pages included in a new app:
    
    • NotFoundPage.js will be served when no other route is found (see Routes.js below).
    • FatalErrorPage.js will be rendered when there is an uncaught error that can't be recovered from and would otherwise cause our application to really blow up (normally rendering a blank page).
  • App.js the bootstrapping code to get our Redwood app up and running.
  • index.css is a good starting place for custom CSS, but there are many options (we like TailwindCSS which, believe it or not, may not require you to write any custom CSS for the life of your app!)
  • index.html is the standard React starting point for our app.
  • Routes.js the route definitions for our app which map a URL to a Page.

We'll dip in and out of these directories and files (and create some new ones) as we work through the tutorial.

Take this and do whatever you want with it, Make a website, Test your skills or whatever. I'm pretty sure the FW supports payment gateways too like stripe via the dev keys.

Download:

Gofile - Free file sharing and storage platform

Gofile is a free file sharing and storage platform. You can store and share your content of any type without any limit.

gofile.io