Giter VIP home page Giter VIP logo

newsprism's Introduction

End to End React with Prisma 2

NewsPrism Logo

Learn the fundamentals for building a full-fledged fullstack React application

This is the repo for the course by Codemochi called End to End React with Prisma 2. We will cover all of the techniques needed to build a fully fledged app- user login, permissions, database management, backend creation. The works!

We will build an entire social RSS reader full stack application from scratch over 10 hours and learn all of the fundamentals of building a professional grade app.

Overview

Check out the master branch to see a step by step guide for building this application from the ground up. Each step is a commit which makes it easy to tell exactly what changed from step to step.

If you just want the finished product, you can clone this repo and the mater branch will have the finished version if you pull the latest.

How to use this Project

If you just want to run the app, check out the latest on the master branch and then create a .env file in the root of your file.

.env

DATABASE_URL='postgresql://postgres:postgres@localhost:5432/yourdatabasename'
AUTH0_CLIENTID=xxxx
AUTH0_DOMAIN=yyyy.us.auth0.com
AUTH0_CLIENT_SECRET=zzzzzz
AUTH0_SCOPE='openid profile'
AUTH0_COOKIE='some-really-long-string-has-to-be-at-least-40-characters'
BACKEND_ADDRESS=http://localhost:3000

You can get the Auth0 credentials by following the video in step 3. The database will get set up in step 2 when we configure Prisma 2.

You can start the app locally by running npm run dev.

Steps

Create the Backend

  1. Create Next.js base
  2. Configure Prisma 2 schema
  3. Configure Auth0
  4. Add graphQL server
  5. Add Context and Middleware
  6. Add Feed queries and mutations
  7. Add Bundle queries and mutations
  8. Add Nested Author information
  9. Add FeedTag and BundleTag relations
  10. Add LikeBundle and LikeFeed Mutations
  11. Add Find queries
  12. Add Update mutations
  13. Add Create Saved Article operations
  14. Add Delete mutations
  15. Add queries, mutations and fragments

Create the Frontend

  1. Add Tailwindcss
  2. Add Layout and Navbar
  3. Add ItemList component
  4. Add OneListItem component
  5. Add Badges
  6. Create Items and Item Detail pages
  7. Start the NewEditItem component
  8. Add SearchItems component
  9. Finish create item functionality
  10. Add update existing item functionality
  11. Add delete button
  12. Add like button
  13. Create the generate article list component
  14. Add saved article list component
  15. Add one article component
  16. Add saved articles page
  17. Tidy it all up

newsprism's People

Contributors

captainchemist avatar

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.