📝 Full Stack Tender Management and Download System

📖 Description

TenderHub is a full-stack React-based web application built with TypeScript and React, designed for browsing, sharing, and downloading tender documents. Users can create organizations, share tenders, view tender details, sort and filter, add to favorites, delete, and more features like Communicating with all documents using Generative AI coming soon.

Features

✨ Functionality:

• Browse a list of available tenders
• View tender details including title, description, and submission deadline
• Download tender documents
• Advanced search functionality to filter tenders based on keywords
• User authentication and authorization with Clerk
• Users can create organizations, share tenders, add favorites, delete, and more
• Professional database setup and deployment using Convex
• Ability to Communicate with all tenders in realtime using Generative AI. coming soon.

🖥️ User Interface:

• Clean and user-friendly interface designed with React components
• Responsive design for different screen sizes (desktop, tablet, mobile)
• Error Handling with Zod and React Hook Forms
• Custom Modals and Hooks that work on any device

🛠️ Setup Instructions

Follow this Documentation to set up the project locally:

1. Clone the repository:

git clone https://github.com/mcakyerima/full_stack_tender_download_system.git

2. Navigate to the project directory and open it in your preferred code editor, preferably vscode:

cd full_stack_tender_download_system

3. Install dependencies:

• In the vscode terminal, run this command to install dependencies and libraries

npm install

4. Set up Convex environment:

After the dependencies installation is finished, open a second new terminal in vscode and run this command

npx convex dev

This command will open the Convex CLI and ask you to select your Device name. After that, it will open the browser to verify your CLI and sign you up. Preferably, you should log in with GitHub. After running this command, Convex will run all the schemas, schema tests, and validations written in the Convex directory, and it will automatically create the database in your Convex dashboard in the cloud.

The npx convex dev command will also create a .env.local file in the root of your project containing your CONVEX_DEPLOYMENT and NEXT_PUBLIC_CONVEX_URL

Example:

# Deployment used by `npx convex dev`
CONVEX_DEPLOYMENT=dev:clear-swordfish-343 # your convex deployment link

NEXT_PUBLIC_CONVEX_URL=https://clear-swordfish-343.convex.cloud

5. Set up Clerk for authentication and organization creation + OTP or email validation:

• Go to Clerk and sign up

• Create a new project and give it a name of your choice

• Choose a Login method of your choice, preferably email and Google.

  

• In the next page, Copy your environment variables and ignore the rest of the settings.

• Paste the environment variable to the .env.local file created by Convex in the root of your project.

• On the sidebar, Click on JWT templates.

• Click on New template and select Convex in the list of available templates.

• This will take you to the issuer key page, Copy the Issuer key

• Save it your environment variables with this exact variable name.

CLERK_DOMAIN=https://<your issuer key>

6. Setting up Webhook.

We need a webhook to communicate from Clerk to our backend. This is needed so that our backend will know when a new user or organization is created, then it will trigger a mutation event and save our users or organizations to our database automatically. Let's configure our Webhook with Clerk.

• After pasting the Issuer key to your .env.local file, click on Webhooks in the sidebar of Clerk. and Click on Add Endpoint

• Next, we need to do a little trick here to create our app's endpoint that will communicate with the Clerk Webhook. We need to extract our CONVEX_DEPLOYMENT URL and then add .convex.site/clerk to it. We can get our convex endpoint in the .env.local file and create the webhook endpoint like this below:

  

• Next, we need to add the URL to the Clerk Endpoint URL like this:

• After adding the endpoint URL, scroll down and choose the events that we will like Clerk to POST to our app. We only need the organizationMembership.created and user.created so that we get notified when a new user or organization is created.

  

• Next, click on Create. This will create the options and also create a Signing Secret that we should Copy and add to our Convex Dashboard later as our CLERK_WEBHOOK_SECRET environment variable.

• Finally, before moving on to Setting up Convex, we need to Enable organizations because organizations are disabled by default.

• After copying the Signing Secret, Click on Organizations on the sidebar and then Enable organizations

7. Setting up our Convex Backend

Before we launch our app, we need to do some configurations to our backend. - Login to convex Convex with the GitHub account you used to create your project in the Convex CLI

This will take you to your dashboard where you will see the project you created in your terminal

-Let's navigate to the settings page on the side bar.

• Select Environment Variables and Create an environment variable CLERK_WEBHOOK_SECRET and paste in the Clerk Signing Secret obtained earlier in the Clerk Webhook page.
• We also need to copy the CLERK_DOMAIN which we earlier added to our .env.local in the root of our project and add it to the Clerk environment variable as well. It should look like something like this.

If everything is set according to this documentation, you should see this in the Data route of your Convex Dashboard.

8. Start the project on local host:

• Go to your code editor and run this command.

npm run dev dev

9. Access the application in your web browser at http://localhost:3000.

📝 Additional Notes

• Should you need any clarification while setting up this project, please reach out to me at any time, and I am ever ready to be there for you.

Made with 💖 by Mohammed Ak.