Skip to content

Gitconvex - A web UI client for managing your git repos. This is the front end repo for the project crafted with react js

License

Notifications You must be signed in to change notification settings

neel1996/gitconvex-ui

Repository files navigation

react tailwind

gitconvex react project

This is the front-end react source for gitconvex.

Dependencies

The dependency packages used by this project can be found here

  • 🎨 Styling - For styling, the project uses tailwind css framework
  • 📑 Syntax Highlighting - prismjs is used for syntax highlighting within the Git Difference and CodeView section
  • 🎭 Icon set - FontAweomse for react

Contribute!

If you are interested in contributing to the project, fork the repo and submit a PR. Currently there are only 3 maintainers working on the project, so the review may take some time

Guidelines

Fork the repo and raise a new Pull Request to merge your branch with the master branch of this repo. Once the review is complete, the PR will be approved and merged

API schema request

The backend is powered by graphql and if your changes require a separate query / mutation to be created to communicate with the server, then suggest your schema in the api_schema.graphql file.

Setup

After cloning the repo, follow the steps mentioned below to setup the react app,

  • Installing dependencies
$ cd gitconvex-ui
$ npm install
  • Building the css file

The project uses tailwindcss v2.0.2 for styling all the elements, so it is mandatory to build the CSS file which is not included in the repo. Follow the steps to build the css file

$ cd gitconvex-ui
$ npm install --global tailwindcss 

$ npm run build:tailwind

## This will generate a default tailwind css bundle

Note: The final production build stage is configured to purge unused CSS selectors from the tailwind css file. So make sure you follow the tailwind purge guidelines to ensure that the required styles are included to the production bundle

  • Starting the app

After completing the setup process, use npm start to start the react app

Project directory tree

├── LICENSE
├── README.md
├── api_schema.graphql
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── gitconvex.png
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   ├── prism.css
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── Components
│   │   ├── Animations
│   │   │   └── InfiniteLoader.js
│   │   ├── DashBoard
│   │   │   ├── AddNewRepoComponent
│   │   │   │   ├── AddNewRepoComponent.tsx
│   │   │   │   ├── AddNewRepoContainer.tsx
│   │   │   │   ├── AddRepoActionButtonsComponent.tsx
│   │   │   │   ├── AddRepoFormComponent.tsx
│   │   │   │   ├── AddRepoStatusAlert.tsx
│   │   │   │   ├── AuthComponent
│   │   │   │   │   ├── AuthComponent.tsx
│   │   │   │   │   ├── AuthOptionsComponent.tsx
│   │   │   │   │   ├── HTTPSAuthForm
│   │   │   │   │   │   ├── HTTPSAuthForm.tsx
│   │   │   │   │   │   └── HTTPSAuthHintComponent.tsx
│   │   │   │   │   └── SSHAuthForm.tsx
│   │   │   │   ├── CloneComponent.tsx
│   │   │   │   ├── ToggleSwitchComponent.tsx
│   │   │   │   └── add-new-repo-state
│   │   │   │       ├── actions.ts
│   │   │   │       ├── addRepoContext.tsx
│   │   │   │       └── addRepoReducer.ts
│   │   │   ├── Compare
│   │   │   │   ├── BranchCompareComponent
│   │   │   │   │   ├── BranchCommitLogChanges.js
│   │   │   │   │   └── BranchCompareComponent.js
│   │   │   │   ├── CommitCompareComponent
│   │   │   │   │   ├── CommitCompareComponent.js
│   │   │   │   │   ├── CommitFileDifferenceComponent.js
│   │   │   │   │   └── CommitLogCardComponent.js
│   │   │   │   ├── CompareActionButtons.js
│   │   │   │   ├── CompareActiveRepoPane.js
│   │   │   │   ├── CompareComponent.js
│   │   │   │   ├── CompareSelectionHint.js
│   │   │   │   ├── RepoSearchBar.js
│   │   │   │   └── SearchRepoCards.js
│   │   │   ├── Dashboard.js
│   │   │   ├── DashboardPaneComponents
│   │   │   │   ├── LeftPane.js
│   │   │   │   └── RightPane.js
│   │   │   ├── Help
│   │   │   │   └── Help.js
│   │   │   ├── Repository
│   │   │   │   ├── GitComponents
│   │   │   │   │   ├── GitDiffViewComponent.js
│   │   │   │   │   ├── GitOperation
│   │   │   │   │   │   ├── CommitComponent.js
│   │   │   │   │   │   ├── GitOperationComponent.js
│   │   │   │   │   │   ├── PushComponent.js
│   │   │   │   │   │   └── StageComponent.js
│   │   │   │   │   └── GitTrackedComponent.js
│   │   │   │   └── RepoComponents
│   │   │   │       ├── AddRepoForm.js
│   │   │   │       ├── RepoCard.js
│   │   │   │       ├── RepoComponent.js
│   │   │   │       ├── RepoDetails
│   │   │   │       │   ├── FileExplorerComponent.js
│   │   │   │       │   ├── RepoDetailBackdrop
│   │   │   │       │   │   ├── AddBranchComponent.js
│   │   │   │       │   │   ├── BranchListComponent.js
│   │   │   │       │   │   ├── CodeFileViewComponent.js
│   │   │   │       │   │   ├── CommitLogComponent.js
│   │   │   │       │   │   ├── CommitLogFileCard.js
│   │   │   │       │   │   ├── FetchPullActionComponent.js
│   │   │   │       │   │   ├── RemoteConfigComponent
│   │   │   │       │   │   │   ├── AddRemoteRepoFormComponent.js
│   │   │   │       │   │   │   ├── RemoteCard.js
│   │   │   │       │   │   │   └── RemoteManagementComponent.js
│   │   │   │       │   │   └── SwitchBranchComponent.js
│   │   │   │       │   ├── RepoInfoComponent.js
│   │   │   │       │   ├── RepoLeftPaneComponent.js
│   │   │   │       │   ├── RepoRightPaneComponent.js
│   │   │   │       │   ├── RepositoryDetails.js
│   │   │   │       │   └── backdropActionType.js
│   │   │   │       └── RepositoryAction.js
│   │   │   └── Settings
│   │   │       ├── Settings.js
│   │   │       ├── SettingsDataFileComponent.js
│   │   │       ├── SettingsPortComponent.js
│   │   │       └── SettingsRepoListComponent
│   │   │           ├── SettingsRepoDeleteBackDrop.js
│   │   │           ├── SettingsRepoDeleteComponent.js
│   │   │           ├── SettingsRepoListCard.js
│   │   │           └── SettingsRepoListComponent.js
│   │   ├── LoadingHOC.js
│   │   ├── SplashScreen.css
│   │   ├── SplashScreen.js
│   │   └── styles
│   │       └── LeftPane.css
│   ├── actionStore.js
│   ├── assets
│   │   ├── gitconvex.png
│   │   └── icons
│   ├── context.js
│   ├── index.css
│   ├── index.js
│   ├── prism.css
│   ├── react-app-env.d.ts
│   ├── reducer.js
│   ├── serviceWorker.js
│   ├── setupTests.js
│   ├── tailwind.config.js
│   ├── tests
│   │   ├── App.test.js
│   │   └── Dashboard.test.js
│   └── util
│       ├── apiURLSupplier.js
│       ├── env_config.js
│       └── relativeCommitTimeCalculator.js
└── tsconfig.json

28 directories, 100 files

About

Gitconvex - A web UI client for managing your git repos. This is the front end repo for the project crafted with react js

Topics

Resources

License

Stars

Watchers

Forks