actually i got one project in my university in which i have to create a portal connecting existing student with the alumni who all are currently employees in companies the basic concept for this is to build a website so that if an existing student needs any details about placement for specific company they can connect to the alumni of the same company here there will be three people who are used to sign in here student, alumni student and administratpr/admin/hod/Academic Advisor etc. Students and alumni student have to upload each and every details that i left upto you but i would like to have multiple details for better understanding. administratpr/admin/hod/Academic Advisor will able to see the details for both the student and the alumni studentcreate a website such that work very nicely for this (give me full stack project for this
I'll create a full-stack portal connecting students with alumni for placement information. This will include authentication for three user types (students, alumni, and administrators), profile management, search functionality, and messaging.
This alumni portal connects current students with alumni who are working professionals. The portal has three user types:
Students can:
Alumni can:
Administrators can:
The project includes:
To deploy this project, you can click the "Deploy" button in the top right corner of the UI. This will create a new project on Vercel with all the necessary files and configurations.
Here's a step-by-step guide to set up and run this project in Visual Studio Code:
Install Node.js and npm
Verify installation by opening a terminal and running:
node --version
npm --versionInstall Visual Studio Code
Open VSCode and a terminal
Ctrl+`)Create a new Next.js project
Run the following command:
npx create-next-app alumni-portalWhen prompted, select the following options:
src/ directory? → NoNavigate to the project directory
cd alumni-portalInstall shadcn/ui and its dependencies
npm install @radix-ui/react-avatar @radix-ui/react-label @radix-ui/react-select @radix-ui/react-tabs @radix-ui/react-radio-group @radix-ui/react-separator @radix-ui/react-slot lucide-react class-variance-authority clsx tailwind-mergeInstall shadcn/ui CLI and initialize it
npm install -D @shadcn/ui
npx shadcn initWhen prompted, select the following options:
Install required shadcn/ui components
npx shadcn add button card input label select textarea avatar badge tabs radio-group separatorCreate the file structure
Create the following directories if they don't exist:
mkdir -p app/login app/signup app/student/dashboard app/student/profile-setup app/alumni/dashboard app/alumni/profile-setup app/admin/dashboard app/directory componentsCopy the project files
For example:
app/page.tsx content to your project's app/page.tsxapp/login/page.tsx content to your project's app/login/page.tsxCreate the dashboard layout component
components/dashboard-layout.tsx and copy the content from the code I provided@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}Start the development server
npm run devAccess the application
Test the login functionality
Explore the different dashboards
Test the profile setup flows
Module not found errors
Component rendering issues
Styling issues
TypeScript errors
By following these steps, you should have a fully functional Alumni Portal running in your local development environment using Visual Studio Code.