web-app-demo-vid.2.1.mov
Empowering International Students at University of Duisburg-Essen
A comprehensive web platform designed to help international students navigate life, studies, and success in Germany. From enrollment to everyday essentials, we provide step-by-step guides, resources, and community support for students at the University of Duisburg-Essen and beyond.
This platform solves the complex challenges international students face when studying in Germany by providing:
- 📚 Academic Guidance: Subject registration, exam processes, and study resources
- 🏠 Accommodation Support: Finding dorms, flats, and Anmeldung assistance
- 📋 Administrative Help: Visa guidance, banking setup, and insurance information
- 💼 Career Resources: Job opportunities, internships, and HiWi positions
- 🌍 Community Building: Connecting students and sharing experiences
- 📞 Direct Support: Contact forms and personalized assistance
| Category | Technologies |
|---|---|
| Frontend | Next.js 15.2.4, React 19, TypeScript 5 |
| Styling | Tailwind CSS 3.4.17, CSS Modules |
| UI Components | Radix UI, shadcn/ui, Lucide React Icons |
| Animations | Framer Motion |
| Forms | React Hook Form, Zod Validation |
| Charts & Maps | Recharts, Leaflet, React Leaflet |
| Theming | next-themes |
| Deployment | Vercel (recommended) |
| Package Manager | npm / pnpm |
- ✅ Fully Responsive Design - Works perfectly on desktop, tablet, and mobile
- ✅ Modern UI/UX - Clean, intuitive interface with smooth animations
- ✅ Dark/Light Theme - Automatic theme switching with system preferences
- ✅ Accessibility - WCAG compliant with keyboard navigation support
- ✅ Dynamic Navigation - Smart breadcrumbs and mobile-friendly menu
- ✅ Contact System - Integrated contact forms with validation
- ✅ Loading States - Skeleton loading for optimal user experience
- ✅ SEO Optimized - Meta tags, structured data, and performance optimized
- ✅ Accommodation Guides - Dorm finder and rental assistance
- ✅ Academic Registration - LSF and HISinOne step-by-step guides
- ✅ Visa & Documents - Anmeldung and residence permit help
- ✅ Banking & Insurance - Account setup and health insurance guidance
- ✅ Radio Tax Info - Rundfunkbeitrag explanation and assistance
- ✅ Job Opportunities - Student jobs, internships, and career resources
- ✅ Language Courses - German language learning resources
- ✅ Campus Map - Interactive university campus navigation
- Node.js version 18 or higher
- npm or pnpm package manager
- Git (for cloning)
git clone https://github.com/im-kaustubh/ude-web.git
cd app- Download the ZIP file from GitHub
- Extract to your desired location
- Open the folder in your terminal
- Install Next JS Dependencies - (if option 0 doesn't work, use 1 or 2 or 3 or 4 or 5)
npm install next
sudo npm install next
npm install next --force
This will change ownership of the npm directories to your user:
sudo chown -R $(whoami) ~/.npm
If you just want to run the development server without installing Next.js globally:
npx next dev
If you prefer to use yarn instead of npm:
npm install -g yarn
yarn add next
yarn dev
I recommend Option 1 (fixing npm permissions) as it's the most sustainable solution that addresses the root cause rather than just working around it.
- Environment Variables (Optional) - NO NEED .env File
Create a
.env.localfile in the root directory:
# Add any API keys or environment variables here
NEXT_PUBLIC_SITE_URL=http://localhost:3000- Start Development Server
# Navigate to the app directory first
cd app
# Start the development server
npm run dev
# or
pnpm dev-
Open Your Browser Navigate to http://localhost:3000
-
Important: Refresh the Page After the server starts, refresh the page once to ensure all elements are properly rendered locally.
npm run build
npm run startnpm run build
npm run startThe application will be available at the specified port (default: 3000).
newintown-website/
├── app/ # Next.js App Router
│ ├── about/ # About Us page
│ ├── accommodation/ # Accommodation guides
│ ├── banking/ # Banking information
│ ├── campus-map/ # Interactive campus map
│ ├── contact/ # Contact page
│ ├── credits/ # Credits page
│ ├── events/ # Events page
│ ├── exam-process/ # Exam registration guides
│ ├── insurance/ # Insurance information
│ ├── jobs/ # Job opportunities
│ ├── language-courses/ # Language learning resources
│ ├── radio-bills/ # Radio tax information
│ ├── subject-registration/ # Subject registration guides
│ ├── visa-guidance/ # Visa and document help
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Homepage
├── components/ # Reusable UI components
│ ├── ui/ # shadcn/ui components
│ ├── breadcrumbs.tsx # Navigation breadcrumbs
│ ├── footer.tsx # Site footer
│ ├── navigation.tsx # Main navigation
│ └── theme-provider.tsx # Theme management
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── public/ # Static assets
├── styles/ # Additional stylesheets
├── .gitignore # Git ignore rules
├── components.json # shadcn/ui configuration
├── next.config.mjs # Next.js configuration
├── package.json # Dependencies and scripts
├── postcss.config.mjs # PostCSS configuration
├── tailwind.config.ts # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
{
"next": "15.2.4",
"react": "^19",
"react-dom": "^19",
"typescript": "^5",
"tailwindcss": "^3.4.17",
"framer-motion": "latest",
"lucide-react": "^0.454.0",
"react-hook-form": "latest",
"zod": "^3.24.1",
"@radix-ui/react-*": "latest"
}{
"@types/node": "^22",
"@types/react": "^19",
"@types/react-dom": "^19",
"postcss": "^8.5",
"autoprefixer": "^10.4.20"
}- Push to GitHub
git add .
git commit -m "Initial commit"
git push origin main- Deploy on Vercel
- Connect your GitHub repository to Vercel
- Vercel will automatically detect Next.js
- Add environment variables if needed
- Deploy with one click
npm run build
# Upload the .next folder to Netlify# Connect your GitHub repo to Railway
# Railway will automatically build and deployWe welcome contributions from the community! Here's how you can help:
- Check existing issues first
- Create a new issue with:
- Clear description of the problem
- Steps to reproduce
- Expected vs actual behavior
- Browser/device information
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes
- Test thoroughly
- Commit:
git commit -m 'Add amazing feature' - Push:
git push origin feature/amazing-feature - Open a Pull Request
- Follow TypeScript best practices
- Use Prettier for code formatting
- Write meaningful commit messages
- Add comments for complex logic
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js - The React framework for production
- Tailwind CSS - A utility-first CSS framework
- Framer Motion - Production-ready motion library
- Radix UI - Unstyled, accessible UI primitives
- shadcn/ui - Beautifully designed components
- Lucide React - Beautiful & consistent icon toolkit
- Placeholder Images - For development and testing
- University of Duisburg-Essen - For supporting international students
- International Student Community - For feedback and suggestions
- Open Source Community - For the amazing tools and libraries
Made with ❤️ for international students by the newInTown team
Helping you navigate your journey in Germany, one step at a time.