Empowering Your Path to Professional Progression.
Table of Contents
JoblessDev is a sophisticated job management platform built on the Next.js and Prisma frameworks, designed to streamline job searching and application processes. It leverages a well-structured web application that integrates dynamic job listings, company profiles, and user-specific bookmarking functionalities. With comprehensive UI components powered by Tailwind CSS, the platform ensures a responsive and consistent user experience. Users can customize job alerts, manage bookmarks, and interact with company data efficiently. JoblessDev effectively automates daily and weekly job updates, enhancing user engagement and operational efficiency in the job search market.
| Feature | Description | |
|---|---|---|
| ⚙️ | Architecture | Utilizes Next.js for SSR and static generation, optimized for performance and SEO. Leverages Prisma for ORM and PostgreSQL for database management. |
| 🔩 | Code Quality | Clean, modular code with high reuse in mind. TypeScript for static typing ensures robustness and maintainability. ESLint for code linting. |
| 📄 | Documentation | Well-documented codebase, including detailed comments in key configurations and components. Each module/folder is self-explanatory. |
| 🔌 | Integrations | Integrates with multiple third-party services: Clerk for authentication, LogSnag for real-time logging, Loops for event-driven actions. |
| 🧩 | Modularity | High degree of modularity, with clear separation in components and API management. Reusable UI components and utilities across the platform. |
| 🧪 | Testing | No explicit mention of testing frameworks or tools used. This area might need further improvement or documentation. |
| ⚡️ | Performance | Optimized for performance with lazy loading, efficient data fetching using React Query and SWR, and minimal re-renders. |
| 🛡️ | Security | Uses Clerk for secure authentication. Prisma's type-safe queries prevent SQL injections. Middleware setups for route protections. |
| 📦 | Dependencies | Key dependencies include Next.js, Tailwind CSS, Prisma, Clerk, React Query, Radix UI components, and several Radix UI primitives. |
| 🚀 | Scalability | Designed for scalability with efficient data handling via React Query, server-side rendering, and modular architecture. |
.
| File | Summary |
|---|---|
| next.config.mjs | Configures Next.js framework settings for the JoblessDev project, ensuring customization and setup align with the specific needs of the application. It serves as the backbone for managing build and runtime behavior, crucial for project scalability and maintainability within the wider repository architecture. |
| tailwind.config.ts | Tailwind.config.ts configures Tailwind CSS for dark mode support and customizes the design system including colors, animations, and responsive containers across the JoblessDev repository, ensuring a consistent and adaptive UI/UX design throughout the applications components and pages. |
| package.json | Defines the JoblessDev applications dependencies, build processes, and scripts essential for running, building, and maintaining the project, ensuring that all necessary libraries and tools are installed and updated, orchestrated primarily through Next.js and Prisma frameworks. |
| components.json | Defines UI configuration and style settings for the JoblessDev project, specifying schema adherence, component structure, and Tailwind CSS customization. It maps critical paths and aliases to streamline development and ensure consistent styling across the application, facilitating a more efficient frontend development workflow. |
| tsconfig.json | Configures TypeScript for the repository, setting up strict typing and JSX compatibility among other options, enhancing developer experience and code reliability. It also customizes module resolution and integrates with the Next.js framework, ensuring seamless development and maintenance of the scalable web application. |
| postcss.config.js | Configures PostCSS to integrate Tailwind CSS and Autoprefixer, enhancing the projects styling capabilities and ensuring cross-browser compatibility of CSS styles. This setup supports the visual consistency and responsive design crucial for user interfaces across different devices and browsers within the JoblessDev repository. |
prisma
| File | Summary |
|---|---|
| schema.prisma | Defines the data schema for a job-oriented application, utilizing Prisma with PostgreSQL. It includes models for jobs, application options, companies, and bookmarks, enhancing functionality for job management, company profiles, and user interactions within the platforms ecosystem. |
src
| File | Summary |
|---|---|
| trigger.ts | Initializes and configures a TriggerClient using environment-specific API keys and URLs to integrate external triggers, enabling the JoblessDev repository to automate interactions and operations based on predefined conditions within its service architecture. |
| middleware.ts | Integrates authentication middleware to secure specific API and user-related routes, ensuring that access is conditional and managed based on authentication status. The middleware configuration explicitly targets API authentication paths and user-specific paths to apply security measures rigorously within the application. |
src.app
| File | Summary |
|---|---|
| layout.tsx | RootLayout in JoblessDev serves as the foundational UI structure for the web application, integrating essential elements like global styling, analytics, and third-party services (Clerk, LogSnag) to enhance user experience and functionality. It dynamically supports child components, ensuring a cohesive and responsive design across the platform. |
| page.tsx | Defines the Home component for the JoblessDev website by integrating the JobBoard component, which fetches and displays job listings from a specified API endpoint. This page serves as the primary interface for users exploring job opportunities, with added context provided through a descriptive title and summary. |
| globals.css | Defines global CSS styles and theming for the JoblessDev platform, incorporating Tailwind CSS for foundational styles, component customizations, and utility classes. It sets up color schemes, typography, spacing, and layout behaviors essential for ensuring a consistent visual interface across the applications various components and pages. |
src.components
| File | Summary |
|---|---|
| logo-card.tsx | LogoCard serves as a clickable branding component within the repository, showcasing a creators logo. It leverages UI card components for presentation, effectively linking to the creators website, thereby enhancing visual recognition and providing direct access to the associated external site. |
| truncated-text.tsx | Implements a reusable TruncatedText component allowing text truncation with a toggle option for expanding or collapsing content, enhancing UI flexibility and readability across the JoblessDev platform. Integrates user interaction through clickable elements, catering to varied content length display needs within user interfaces. |
| navbar.tsx | Navbar manages user interaction across the application, integrating authentication controls, user data analytics, and navigation links including job search, bookmarks, and about/contact pages. It dynamically adjusts content and function based on user sign-in state, enhancing personalized experience and engagement. |
| ReactQueryProvider.js | ReactQueryProvider facilitates state management across the JoblessDev application. It initializes a QueryClient to manage the caching and state of server-side data, ensuring minimal re-fetching by setting a default stale time. This component wraps child components, providing them access to the React Query context. |
| infinite-scroll.tsx | InfiniteScroll component in JoblessDev repository enhances the user interface by automatically loading more content as the user scrolls, integrating features like custom thresholds, root margins, and reverse scrolling to accommodate various UI needs within the apps dynamic content display strategy. |
| email-frequency-selector.tsx | EmailFrequencySelector component enables authenticated users to customize their email notification frequency for new job alerts, offering options like never, asap, daily, and weekly. It uses tooltips to enhance user experience and interfaces with the backend through API calls to fetch and update preferences. |
| job-board.tsx | API StructureThe src/app/api directory is pivotal, containing subdirectories for different domains such as auth, companies, jobs, and trigger. Each of these directories contains route.ts files, suggesting they handle specific HTTP routes related to their respective domains. For example:-auth likely manages authentication and user-related actions.-companies might handle information related to companies on the platform.-jobs could be responsible for posting and retrieving job listings.-trigger might deal with backend processes that need to be run on certain events.2. **Prisma IntegrationThe existence of a prisma directory with a schema.prisma file indicates the use of Prisma ORM for data management. This setup is crucial for handling database schema and interactions efficiently in a robust, type-safe manner.3. **Static and Public ResourcesLocated in the public directory, resources like logos and placeholder images suggest a user interface that might include company branding and user profile capabilities.4. **Configuration and Dependency Management-package.json and bun.lockb files indicate dependency management, with the latter suggesting the use of Bun |
| company-list.tsx | CompanySearchSelect in company-list.tsx provides an asynchronous dropdown component for selecting companies by name. It utilizes API calls to fetch company options based on user input, supports multiple selections, and integrates initial selections for reusability in various parts of the application. |
| fetch-jobs.tsx | FetchJobsOrBookmarks dynamically queries either job listings or user bookmarks based on specified parameters, utilizing infinite scrolling for pagination. It leverages Axios for HTTP requests and React Query for state management, enhancing UX by reducing unnecessary data fetching and improving responsiveness. |
| bookmark.tsx | Bookmark.tsx facilitates user interactions with job listings by enabling bookmarking features. It integrates user authentication checks, API communications for bookmark status, and provides visual feedback and analytics tracking for both bookmarking and unbookmarking actions, enhancing user experience within the JoblessDev platform. |
| icons.tsx | Defines a collection of SVG icons including BookmarkIcon, BriefcaseIcon, GithubIcon, and ExternalLinkIcon, essential for rendering intuitive graphical user interfaces throughout the JoblessDev application, enhancing visual representation and user interaction within the platforms component library. |
| info-card.tsx | The info-card.tsx component enhances user interaction by providing a dynamically updating information card. It details job application parsing processes, refresh intervals, and the latest update timestamp, enriching the user interface within the JoblessDev platforms job search functionality. |
src.lib
| File | Summary |
|---|---|
| utils.ts | Facilitates streamlined integration of CSS class definitions by merging them efficiently. Essential for maintaining concise and conflict-free style attributes across the JoblessDev platforms frontend components, enhancing both development efficiency and runtime performance. |
src.jobs
| File | Summary |
|---|---|
| parse-jobs.ts | The parse-jobs.ts script automates the retrieval and storage of job listings from an external API, efficiently managing duplicates and integrating directly with company and job databases using Prisma, while providing real-time logging and user notifications via LogSnag and Loops. |
| daily-jobs-digest.ts | Generates a daily job report by counting jobs added in the last day and distributing this information via emails to all users, while also tracking and logging the activity for insights and notifications using integration with Prisma, Loops, and LogSnag APIs. |
| weekly-jobs-digest.ts | Generates a weekly jobs report by counting new job entries over the past week and sending this data to registered users via email. Utilizes external APIs for tasks like user data retrieval and logs activities for tracking and notifications purposes, integrating with services like LogSnag and Loops. |
| index.ts | Acts as a central export hub within the JoblessDev repository, facilitating streamlined access to job-related functionalities including parsing jobs and managing job digest routines, such as daily and weekly dispatches, thereby enhancing modular architecture and maintainability of the job processing features. |
src.app.user.bookmarks
| File | Summary |
|---|---|
| page.tsx | Provides a user-specific view in the JoblessDev web application, displaying a customized Job Board populated with bookmarked job postings. It leverages an API endpoint to fetch user-specific data, enhancing user experience by centralizing bookmarked jobs for easy access and management. |
src.app.api.trigger
| File | Summary |
|---|---|
| route.ts | Enables interaction with Trigger.dev services by defining API routes for sending and receiving data efficiently within the application. Configurable options for execution duration are included, adhering to service plan limits, enhancing adaptability for performance optimization based on operational needs. |
src.app.api.jobs
| File | Summary |
|---|---|
| route.ts | Facilitates dynamic retrieval of job listings from a database using a PrismaClient, adhering to search parameters like keywords, company names, or location. Supports pagination and offers a flexible query structure, enhancing user experience by efficiently fetching and providing relevant job data based on user inputs. |
src.app.api.companies
| File | Summary |
|---|---|
| route.ts | Facilitates querying of company data through the JoblessDev API, allowing for search filtering, pagination, and retrieval of related job counts. This service dynamically handles company-specific queries, ascending order sorting, and error management within the systems architecture for enhanced user data interaction. |
src.app.api.auth.emails
| File | Summary |
|---|---|
| route.ts | Manages email contacts within the JoblessDev platform, integrating user data with the Loops API to create and update contact details based on user preferences for email frequency and other settings. Utilizes authentication to validate user identity and tailor interactions accordingly. |
src.app.api.auth.bookmarks
| File | Summary |
|---|---|
| route.ts | Manages user bookmark interactions within the JoblessDev repository by facilitating the retrieval, creation, and deletion of job bookmarks tied to user profiles, utilizing authentication and database operations through Prisma and Clerk. |
src.app.api.auth.user.bookmarks
| File | Summary |
|---|---|
| route.ts | Manages the retrieval of bookmarked job listings for authenticated users, filtering by job state and search terms. It leverages Prisma for database interactions and supports pagination, optimizing user access to relevant job data within the broader JoblessDev application architecture. |
src.app.api.auth.bookmarks.[id]
| File | Summary |
|---|---|
| route.ts | Enables the verification of user-specific bookmarks within the JoblessDev platform by utilizing Prisma ORM to query the database for the existence of a bookmark. It employs authentication to ensure that the inquiry is user-specific and returns the bookmark status effectively. |
src.components.ui
| File | Summary |
|---|---|
| card.tsx | Defines a suite of React components for creating various sections of a UI card, including the card itself, header, title, description, content, and footer. These components ensure a consistent design and structure within the applications user interface, leveraging utility functions for streamlined stylization. |
| popover.tsx | Provides a customizable UI component for creating popovers, leveraging Radix UIs primitives for accessibility and smooth animations. Enables developers to specify alignment and offset, ensuring the popovers content adapts to different UI contexts within the JoblessDev platform. |
| hover-card.tsx | Implements a HoverCard component utilizing Radix UI primitives, enhancing UX with smoothly animated tooltips. This component neatly integrates into the UI library within the repository, providing standardized visual feedback through hover-triggered cards across the platform. |
| tooltip.tsx | Integrates a customizable tooltip component within the UI framework using Radix UI primitives, enhancing user interface elements with additional context or information. The implementation supports animation and styling customization, ensuring a seamless and informative user experience across various parts of the application. |
| command.tsx | Integrates a customizable command palette into the user interface, leveraging React and CMDK libraries for seamless interaction and navigation within the application. It features elements like searchable inputs, lists, and dialog components, enhancing user experience by providing efficient access to commands and actions. |
| avatar.tsx | Implements customizable avatar components using Radix UIs primitives, providing a simple interface for incorporating user images with fallbacks in the UI. It enhances user interactivity and visual identity across the repositorys frontend architecture. |
| dialog.tsx | Provides a comprehensive dialog component leveraging Radix UI for modals in the application. It features customizable overlays, content areas, and animation controls, allowing for a dynamic user interaction model. The dialog structure supports accessibility and responsive design elements. |
| separator.tsx | Separator.tsx defines a reusable UI component for creating horizontal or vertical dividers within the apps interface, leveraging the Radix UI toolkit to enhance visual organization and conform to design standards across different pages and components within the JoblessDev platform. |
| button.tsx | Button.tsx defines a customizable Button component utilizing the CVAA for style variants. The component supports multiple size and style settings, including default, destructive, and outline, tailored for varying UI needs. It also allows for use as a child component, enhancing flexibility in development. |
| select.tsx | Implements a customizable select dropdown component using React and Radix UI primitives, featuring accessibility and styling enhancements, icons integration, and animations for dynamic interaction, supporting both desktop and mobile views within the applications user interface framework. |
| input.tsx | Enhances user interface interaction by providing a customizable input component. This component, part of the UI toolkit in the JoblessDev repository, supports various HTML input attributes and integrates style customization options to maintain a consistent design within the applications front-end architecture. |
| skeleton.tsx | Skeleton.tsx provides a UI component essential for enhancing user experience by displaying placeholder elements during asynchronous data fetching. It utilizes animation to indicate loading states, seamlessly integrating with the broader design system encapsulated within the UI components of the JoblessDev repository. |
- Clone the JoblessDev repository:
$ git clone https://github.com/Ozeitis/JoblessDev
- Change to the project directory:
$ cd JoblessDev
- Install the dependencies:
$ npm install
Run JoblessDev using the command below:
$ npm run build && node dist/main.js
Contributions are welcome! Here are several ways you can contribute:
- Report Issues: Submit bugs found or log feature requests for the
JoblessDevproject. - Submit Pull Requests: Review open PRs, and submit your own PRs.
- Join the Discussions: Share your insights, provide feedback, or ask questions.
Contributing Guidelines
- Fork the Repository: Start by forking the project repository to your github account.
- Clone Locally: Clone the forked repository to your local machine using a git client.
git clone https://github.com/Ozeitis/JoblessDev
- Create a New Branch: Always work on a new branch, giving it a descriptive name.
git checkout -b new-feature-x
- Make Your Changes: Develop and test your changes locally.
- Commit Your Changes: Commit with a clear message describing your updates.
git commit -m 'Implemented new feature x.' - Push to github: Push the changes to your forked repository.
git push origin new-feature-x
- Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
- Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!
Contributor Graph