KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #dsh #dsh-plugin #ai-agent #claude-code #codex #typescript #ai-agents #mcp #cli #rust #deepseek-harness

One-place

★ 50 Open GitHub ↗

CRM CRUD Admin Panel app, built in React and node.js connected to MySQL

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<br />
<div align="center">
  <a href="https://github.com/Zlvsky/One-place">
    <img src="readmeimages/logo.png" alt="Logo" width="200" height="70">
  </a>

<h3 align="center">One Place</h3>

<p align="center">
    This is my first self made bigger project that I was working on recently. It is CRM, CRUD app built on: front-end: react, back-end: node.js, express, mysql.
    <br />
    Main purpose of this project is to manage business based on orders that don't need online shop.
    <br />
    For example selling items on livestreams.
    <br />
  </p>
</div>

## Showcase of project

<h3>Login page</h3>
<p>Page content is restricted to logged in users only</p>
<p>Authentication is based on <a href="https://www.npmjs.com/package/passport">passport</a> middleware</p>
<p>Accounts are stored in mysql database and passwords are hashed via <a href="https://www.npmjs.com/package/bcrypt">bcrypt</a> library </p>
<img src="https://user-images.githubusercontent.com/45123514/162189773-c7c035d7-b52d-4654-bb1a-cdda27cc58ea.gif" />
<br/>

<h3>Homepage</h3>
<p>In homepage there are summaries of orders, clients, upcoming events etc.</p>
<p>There is interactive graph which shows total earnings by past 12 months based on actual date</p>
<img src="https://user-images.githubusercontent.com/45123514/162190382-338c0dc7-639b-45cf-9342-b4b6f423875e.gif" />

<h3>Orders page</h3>
<p>Orders are fetched from database and displayed in filtered array</p>
<img src="https://user-images.githubusercontent.com/45123514/162190759-58e73ba7-0e1c-4afe-b92a-5097d9ebdc0b.gif" />

<h3>Adding new orders</h3>
<p>Users can add new orders</p>
<p>New orders can be assigned to existing clients or new client can be added</p>
<img src="https://user-images.githubusercontent.com/45123514/162191057-c07a7d83-ff92-4de5-b50e-27daf49ad01d.gif" />

<h3>Order page by ID</h3>
<p>Each order have it's individual page</p>
<img src="https://user-images.githubusercontent.com/45123514/162191105-b0fa7a0c-4001-4ce2-93d8-dd1db044eb0e.gif" />

<h3>Clients page</h3>
<p>Works similar as order pages</p>
<p>Clients can be added by users</p>
<p>Each client have his own individual page, with content like: total orders, total spendings etc.</p>
<img src="https://user-images.githubusercontent.com/45123514/162191602-9e22fe4a-580a-40d8-ac5d-e2b3e3a899c5.gif" />

<h3>Events calendar page</h3>
<p>Users can add upcoming events</p>
<p>Events are separeted to 2 pieces</p>
<p>First piece are current and upcoming events</p>
<p>Second piece are expired events</p>
<p>Events are filtered by date: closest events are at top</p>
<img src="https://user-images.githubusercontent.com/45123514/162192249-74d12978-c011-44e9-97a9-5e17fc422ab4.gif" />

<h3>Admin panel</h3>
<p>If logged user is admin, he have access to admin panel</p>
<p>For that moment he can add new users, aswell as deleting them</p>
<img src="https://user-images.githubusercontent.com/45123514/162192533-ab2e025f-99ea-4fec-a42e-45d1bbb00b4a.gif" />

<h3>Additional info</h3>
<p>I've styled the whole app with pure CSS by myself</p>
<p>The app was designed to be non-scrollable.</p>
<p>I've decided to not use next.js to improve my node.js skills and learn more about front-end --- back-end synergy</p>

### Built With

* [React.js](https://reactjs.org/)
* [Express.js](https://expressjs.com/)
* [Node.js](https://nodejs.org/en/)
* [MySQL](https://www.mysql.com/)
* [Passport](https://www.npmjs.com/package/passport)

### Installation

1. Clone the repo
   ```sh
   git clone https://github.com/Zlvsky/One-place.git
   ```
2. Install NPM packages in root folder and /client folder
   ```sh
   npm install
   ```
3. Create and configure your .env file in root folder
   ```js
    DB_HOST='127.0.0.1'
    DB_USER=''
    DB_PASSWORD=''
    DATABASE=''
   ```
4. Import sql database template to server (one-place.sql)
5. Add first admin account
6. Run app with <a href="https://www.npmjs.com/package/concurrently">concurrently</a> library (node.js and react app at the same time)
   ```sh
   npm run dev | npm run build
   ```
<p align="right">(<a href="#top">back to top</a>)</p>

One-place

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README