Build a Crime Report App using Nextjs14, GeminiAI, Shadcn and TailwindCSS

Описание: Try https://seowriting.ai Now: Get 25% Discount using my promo code "ALBERTMENDS'

Discord channel link:   / discord  

Built with the latest Next.js 14. SafeReport is designed to provide a secure platform for reporting incidents while maintaining complete anonymity.

🎓 What You'll Learn:
Next.js 14 fundamentals and best practices
Full stack development with Next.js
Integrating AI (Google's Gemini AI) into your Next.js app
TypeScript implementation in Next.js
Responsive design using Tailwind CSS
Authentication with NextAuth
Database integration using Prisma ORM

📚 Project Highlights:
The AI capabilities using Gemini for writing incident description
The core anonymous reporting functionality
The location-based features using Mapbox
The security infrastructure

👨‍💻 Step-by-Step Guide:
Setting up a Next.js 14 project
Creating a responsive layout with Tailwind CSS and shadcn
Database design and integration with Prisma ORM
AI model integration for report description and details
Building interactive UI components (e.g., dashboard, track report, submit report)

⭐ Key Technologies:
Next.js 14: https://nextjs.org/
Prisma ORM: https://www.prisma.io/
TailwindCSS: https://tailwindcss.com/
Google Gemini AI: https://ai.google.dev/
Neon Database: https://neon.tech/
Mapbox: https://console.mapbox.com/


📚 Materials/References:
GitHub Repo (give it a star ⭐): https://github.com/mendsalbert/crime-...
README (assets & code): https://github.com/mendsalbert/crime-...

👋 Social Media:
  / mendsalbert  
  / mendsalbert_  
  / mends-albert  
https://t.me/albertmends

Subscribe or I turn your vs code into light mode
╔═╦╗╔╦╗╔═╦═╦╦╦╦╗╔═╗
║╚╣║║║╚╣╚╣╔╣╔╣║╚╣═╣
╠╗║╚╝║║╠╗║╚╣║║║║║═╣
╚═╩══╩═╩═╩═╩╝╚╩═╩═╝ 
Timestamps 
00:00:00 - intro
00:02:39 - seowriting.ai
00:07:02 - starter file
00:09:10 - layout page
00:20:55 - navbar
00:45:55 - homepage
01:06:28 - submit report page
01:52:22 - setting up db (prisma)
02:06:27 - submit report page con’t
02:20:45 - Nextjs APIs (analyze-image route)
02:35:14 - submit report page con’t
02:43:10 - track-report page
02:54:41 - signin, signup & dashboard page
03:35:34 - outro


💼 Business inquiries: [email protected]

👨🏽‍💻 Tools and Tech Stack
React JS, Next.js, TailwindCSS, Typescript, Preline, OpenAI API, Tabler Icon, JavaScript, Gemini AI, Drizzle ORM, Shadcn, Neon Console, Nextjs14, Prisma

Whether you're new to React.js , NextJs or looking to enhance your skills, this tutorial covers everything from basic setup to advanced features. Learn how to leverage the power of React.js for building scalable, performant web applications.
Subscribe for more React.js tutorials, web development tips, and full stack development guidance!

#ReactJS #WebDevelopment #AIinHealthcare #FullStackDevelopment #TypeScript #TailwindCSS #JavaScript #CodingTutorial #nextjs #gemini #openai #ai