JDG - Website is a volunteer-built Next.js 13.4 website for the JDG group, combining a corporate landing page, dynamic job application routes, and a blog in one responsive project.
What is JDG - Website?
This is a front-end website project developed for the JDG group, built with Next.js 13.4 and TypeScript. It takes mock data as input and renders a complete multi-section site — including a home screen, projects listing, FAQ, job openings, a dynamic job application form, and a blog with dynamic post pages — and outputs a responsive, deployable web application that was published on Vercel. The project was created by contributors Willdemberg and Matheus Henrique (development) and Ana Clara Araujo (design).
Key Features
- Dynamic routes for job applications — each job opening has its own application form page, created with Next.js dynamic routing.
- Blog with dynamic post pages — the blog section renders individual posts at their own URLs, also using dynamic routes.
- Tailwind CSS styling — the entire interface uses Tailwind CSS for utility-first styling and responsive layouts.
- React Hook Form integration — the job application forms use react-hook-form for input handling and validation.
- react-toastify notifications — user-facing feedback toasts are implemented through react-toastify.
- Swiper carousels — the swiperjs library powers sliders and carousels in the interface.
- react-icons icons — icons are handled with the react-icons package.
- Responsive sections — the developer states they built the header, home screen, projects, FAQ, jobs, application form, blog, and post info, all with fully responsive layouts.
- Mocked data version — this version ships with mocked data for better performance, ready to be replaced with real data.
Who is it for?
- Community groups or volunteer organizations that need a professional web presence with informational sections, a blog, and job application workflows, and want a ready-made Next.js front-end.
- Next.js developers looking for a reference implementation of dynamic routes, form handling with react-hook-form, and Tailwind styling in a single project.
- Student or volunteer project teams that need a starting point for a group website and want to see how to integrate common React libraries such as Swiper and react-toastify.
What can you do with this template?
- Run job application workflows: Create dynamic application pages for each job opening, where applicants fill out forms and receive toast notifications.
- Publish a group blog: Write posts with mock data and have each post open on its own route, with a dedicated post information layout.
- Showcase projects and FAQ: Present the group's projects and frequently asked questions in ready-styled sections out of the box.
How does it work?
The project is run locally by cloning the repository, installing dependencies with npm install, then starting the development server with npm run dev. The README also suggests Visual Studio Code editor settings for ESLint auto-fixing. Deployment is set up through Vercel, as shown by the live demo link.
