Git Product home page Git Product logo

aytaditya / gitforge Goto Github PK

View Code? Open in Web Editor NEW
8.0 1.0 0.0 3.08 MB

Developed a GitHub-inspired web application utilizing the MERN stack, Tailwind CSS, and the GitHub API, integrated with Docker and user authentication via GitHub using Passport.js. The application will also feature a profile liking system.

JavaScript 96.67% HTML 0.90% CSS 1.74% Dockerfile 0.69%
docker express javascript mern-stack mongodb-atlas nodejs passportjs react tailwindcss github-api

gitforge's Introduction

GitForge Web Application

Overview

This project is a GitHub-inspired web application built using the MERN stack (MongoDB, Express.js, React, Node.js), Tailwind CSS, and the GitHub API. It includes Docker integration for containerization and uses Passport.js for GitHub-based user authentication. Additionally, the application features a profile liking system and a repository exploration section.

Features

  • MERN Stack: MongoDB for the database, Express.js for the backend framework, React for the frontend framework, and Node.js for the runtime environment.
  • Tailwind CSS: A utility-first CSS framework for styling.
  • GitHub API Integration: Fetch and display data from GitHub.
  • Docker Integration: Containerization of the application for consistent development and deployment environments.
  • GitHub Authentication: Secure user authentication via GitHub using Passport.js.
  • Profile Liking System: Users can like each other's profiles.
  • Repository Exploration: Explore the top 30 most liked repositories in JavaScript, TypeScript, C#, Python, Go, Flutter, Dart, Java, C++, and Swift.

Getting Started

Installation

Prerequisites

  • Node.js
  • Docker
  • MongoDB
  • GitHub OAuth App credentials

Steps

  1. Clone the Repository

    git clone https://github.com/your-username/github-inspired-app.git
    cd gitForge
  2. Set Up Environment Variables

    Create a .env file in the root directory with the following content:

    PORT=3000
    MONGODB_URI=mongodb://localhost:27017/github-inspired-app
    GITHUB_CLIENT_ID=your_github_client_id
    GITHUB_CLIENT_SECRET=your_github_client_secret
    SESSION_SECRET=your_session_secret
  3. Install Dependencies

    npm install
    cd .\frontend\
    npm install
    cd ..
  4. Run the Application with Docker

    Ensure Docker is installed and running, then execute:

    docker-compose up --build
  5. Run the Application without Docker

    If you prefer running the application without Docker:

    # Start MongoDB if not already running
    mongod
    
    # Start the backend server
    npm run server
    
    # In another terminal, start the frontend development server
    cd client
    npm run dev

Usage

  1. Visit the Application

    Open your web browser and navigate to http://localhost:3000.

  2. Log In with GitHub

    Click on the "Log in with GitHub" button to authenticate using your GitHub account.

  3. Interact with Profiles

    Browse and like user profiles.

  4. Explore Repositories

    Go to the "Explore Repositories" section to view the top 30 most liked repositories in various programming languages including JavaScript, TypeScript, C#, Python, Go, Flutter, Dart, Java, C++, and Swift.

Development

File Structure

  • backend/: Contains the backend code (Express.js, MongoDB).
  • frontend/: Contains the frontend code (React, Tailwind CSS).
  • docker-compose.yml: Docker Compose file for container orchestration.
  • .env: Environment variables (not included in the repository).

Scripts

  • backend
    • npm run server: Start the backend server.
  • frontend
    • npm run dev: Start the React+Vite development server.

Acknowledgements

Getting Started

gitforge's People

Contributors

aytaditya avatar

Stargazers

Aditi Singh avatar Aniket Baravkar avatar  avatar Suranshu Singh avatar Ashahar Yunus Khan avatar  avatar Priyam avatar Meet Patel avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.