Giter Site home page Giter Site logo

fe-bangazon's Introduction

React/Next.js Django Auth Template

Topics


Getting Started

Use Template

1. To get started, click the GREEN "Use this Template" button at the top of the repo

Screen Shot 2022-07-06 at 12 54 01 PM

2. Make sure YOUR github account is selected in the dropdown and name your project

Screen Shot 2022-07-06 at 12 54 48 PM

3. Clone your new repo to your local machine

4. Go to the NEXT section

Starting the Project

  1. Create a Firebase project and set up authentication. Use these videos as a refresher if needed.
  2. Create a .env file at the root of the project
  3. Copy/Paste the contents of the .env.sample file to your newly created .env file.
  4. Copy over all of your Firebase values into the .env file.
  5. Open the package.json file and change the name property to the name of your application, and author to your name.
  6. From your command line, be in the root directory and run npm install OR npm i for short.
  7. Next, run npm run prepare. This command sets up husky to track eslint errors on commit that will make your deploy fail on Netlify.
  8. To start your application, run npm run dev. THIS IS THE COMMAND YOU WILL USE TO RUN YOUR DEVELOPMENT SERVER FROM NOW ON.
  9. Open http://localhost:3000 with your browser.

If you see this, you are set to go!

Screen Shot 2022-07-06 at 1 07 27 PM

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

NOTES:

  • If you see the following error, you did not follow all the setup steps correctly and failed to add your Firebase creds. Go back and do that NOW.

Screen Shot 2022-07-06 at 11 18 45 AM

Learn More about Next.js

To learn more about Next.js, take a look at the following resources:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.