Skip to content

luigilupini/project-next-creative-threads-app

Repository files navigation

Creative threads (with firebase)

A posting/tweeting 📭 webapp demonstrating the interaction with firebase and Next.js.

alt text

Featuring:

  • This is a Next.js project bootstrapped with create-next-app.
  • Open my vercel.app with your browser to see the result.
  • All authentication and messaging (posts), is securely stored with firebase.
  • Added tailwindcss support by following the Install Tailwind CSS with Next.js guide.
  • Added firebase support and functions to store and query user data.
  • Register the firebase project as a Web-App to get your Firebase SDK to make use of functions like getAuth, collection, onSnapshot.
  • Providers used are Google and Facebook.
  • React Firebase Hooks that offers a set of reusable React Hooks for Firebase.
  • The react-firebase-hooks/auth helps with firebase interaction within our React application.
  • The useAuthState hook is used to retrieve and monitor the authentication state from Firebase.

Dependencies:

"dependencies": {
    "firebase": "^9.11.0",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-firebase-hooks": "^5.0.3",
    "react-icons": "^4.4.0",
    "react-toastify": "^9.0.8"
  },

Regards,
Luigi Lupini

I ❤️ all things (🇮🇹 / 🛵 / ☕️ / 👨‍👩‍👧)

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

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

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.