One-place - GitLite

KO | EN

gitlite — search

#javascript #python #react #go #android #machine-learning #deep-learning #java #cli #kubernetes #pytorch #mcp #ios #openai

One-place

(★ 51)

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

파일 탐색기

최종 버전 다운로드 (.zip)

- - favicon.ico
  - index.html
  - logo192.png
  - logo512.png
  - manifest.json
  - robots.txt
- - App.js
  - index.js
  - registerServiceWorker.js
- .gitignore
- package-lock.json
- package.json
- README.md
- createorder.PNG
- events.PNG
- home.PNG
- login.PNG
- logo.png
- orders.PNG
- users.PNG
.gitignore
one-place.sql
package-lock.json
package.json
passport-config.js
queries.js
README.md
server.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/Zlvsky/One-place

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd One-place

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm run dev | npm run build

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div id="top"></div>

<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>

<p align="right">(<a href="#top">back to top</a>)</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)

<p align="right">(<a href="#top">back to top</a>)</p>

### 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>