Unique-Postcard Creation

This is how I created the Unique Postcard app structure step-by-step.

---

Step 1 – Create a New Next.js App

Inside the unique-postcard folder, I opened the terminal and ran the command to create a new Next.js app:

npx create-next-app@latest

You’ll be prompted with the following:

Need to install the following packages:
[email protected]
Ok to proceed? (y) y

Then I chose the following options:

• Would you like to use TypeScript? → No
• Would you like to use ESLint? → Yes
• Would you like to use Tailwind CSS? → No
• Would you like your code inside a src/ directory? → Yes
• Would you like to use App Router? (recommended) → Yes
• Would you like to use Turbopack for next dev? → No
• Would you like to customize the import alias (@/* by default)? → No

This created a clean starting point for Unique Postcard, with a src directory and support for modern Next.js features.

Why I Chose These Options

• I used plain JavaScript instead of TypeScript to simplify things.
• ESLint was enabled to help catch potential bugs and enforce good coding habits.
• I skipped Tailwind CSS because I chose to use regular CSS modules.
• The src/ folder keeps the project structure clean and modular.
• The App Router follows best practices in newer Next.js versions.
• I kept the default import paths to avoid unnecessary complexity.

---

Step 2 – Open the Project in Visual Studio Code and Browser

Once the app was created, I opened the folder in Visual Studio Code:

code .

Then started the dev server:

npm run dev

The app ran at:

http://localhost:3001

---

Step 3 – Install Firebase

To enable authentication and database functionality, I installed Firebase:

npm install firebase@^11.6.0

Firebase is used to:

• Handle user login via Google sign-in
• Store user-specific data
• Manage real-time interactions using Firestore

I imported and used the following Firebase functions:

• getAuth
• signInWithPopup
• getFirestore
• collection
• addDoc
• and more...

👉 URL till Readme Tillbaka till förstasidan