Architecture of an UI component

Learn the concepts used in this project

• Create React Isomorphic App like a Pro

Node.js Backend API Project: Goto Repository

How to build and run this project

• Install the API server. Read Instructions Here
• Install using Docker Compose [Recommended Method For Production]
  • Clone this repo.
  • Make a copy of .env.example file to .env.
  • Make a copy of tests/.env.test.example file to tests/.env.test.
  • Make sure the .env file has the API_BASE_URL point to the API server.
  • Install Docker and Docker Compose. Find Instructions Here.
  • Execute docker-compose up -d in the terminal from the repo directory.
  • You will be able to access the website from http://localhost:3001
  • If having any issue then make sure 3001 port is not occupied else provide a different port in .env file.
• Install Without Docker [2nd Method For Development]
  • Do steps 1 to 4 as listed above for Install using Docker Compose.
  • Execute npm install
  • Run the project:
    • Development: Execute npm run watch
    • Production: Execute npm start
  • You will be able to access the website from http://localhost:3001

Find this project useful? :heart:

• Support it by clicking the :star: button on the upper right of this page. :v:

Website Pages

• Landing
• Blog List
• Blog Page
• Writing Pad - Markdown Editor
• Preview - Markdown to HTML
• Blog Detail Form
• Writer Blogs Management
• Editor Blogs Management

Project Directory Structure

.
├── .templates
│   ├── component
│   │   ├── actions.ts
│   │   ├── assets
│   │   │   └── .gitkeep
│   │   ├── index.tsx
│   │   ├── reducer.ts
│   │   └── style.ts
│   └── simple_component
│       ├── index.tsx
│       └── style.ts
├── .vscode
│   ├── extensions.list
│   ├── launch.json
│   ├── settings.json
│   └── tasks.json
├── public
│   ├── favicon.ico
│   ├── robots.txt
│   ├── sitemap.xml
│   └── template.html
├── src
│   ├── app-types.d.ts
│   ├── index.tsx
│   ├── reducers.ts
│   ├── server
│   │   ├── app.ts
│   │   ├── devStoreConfig.ts
│   │   ├── pageBuilder.tsx
│   │   ├── routes.tsx
│   │   ├── server-types.d.ts
│   │   ├── server.dev.ts
│   │   ├── server.prod.ts
│   │   └── template.ts
│   ├── theme.ts
│   ├── ui
│   │   ├── app
│   │   │   ├── actions.ts
│   │   │   ├── index.tsx
│   │   │   ├── reducer.ts
│   │   │   ├── routes.tsx
│   │   │   └── style.ts
│   │   ├── auth
│   │   │   ├── actions.ts
│   │   │   ├── index.tsx
│   │   │   ├── login.tsx
│   │   │   ├── reducer.ts
│   │   │   ├── singup.tsx
│   │   │   └── style.ts
│   │   ├── bloglist
│   │   │   ├── actions.ts
│   │   │   ├── assets
│   │   │   │   └── blog-page-cover.jpg
│   │   │   ├── index.tsx
│   │   │   ├── reducer.ts
│   │   │   └── style.ts
│   │   ├── blogpage
│   │   │   ├── actions.ts
│   │   │   ├── index.tsx
│   │   │   ├── reducer.ts
│   │   │   └── style.ts
│   │   ├── common
│   │   │   ├── confirmation
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── firstletter
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── markdown
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── placeholders
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── preview
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   └── snackbar
│   │   │       ├── index.tsx
│   │   │       └── style.ts
│   │   ├── editor
│   │   │   └── blogs
│   │   │       ├── actions.ts
│   │   │       ├── index.tsx
│   │   │       ├── reducer.ts
│   │   │       └── style.ts
│   │   ├── footer
│   │   │   ├── index.tsx
│   │   │   └── style.ts
│   │   ├── header
│   │   │   ├── assets
│   │   │   │   └── afteracademy-logo.svg
│   │   │   ├── index.tsx
│   │   │   └── style.ts
│   │   ├── landing
│   │   │   ├── assets
│   │   │   │   ├── afteracademy-blog.jpg
│   │   │   │   ├── afteracademy-youtube.jpg
│   │   │   │   ├── mindorks-blog.jpg
│   │   │   │   ├── mindorks-logo.svg
│   │   │   │   ├── mindorks-medium-blog.jpg
│   │   │   │   ├── mindorks-opensource.jpg
│   │   │   │   └── mindorks-youtube.jpg
│   │   │   ├── index.tsx
│   │   │   └── style.ts
│   │   ├── notfound
│   │   │   ├── index.tsx
│   │   │   └── style.ts
│   │   └── writer
│   │       ├── myblogs
│   │       │   ├── actions.ts
│   │       │   ├── index.tsx
│   │       │   ├── reducer.ts
│   │       │   └── style.ts
│   │       └── writingpad
│   │           ├── actions.ts
│   │           ├── form.tsx
│   │           ├── index.tsx
│   │           ├── reducer.ts
│   │           └── style.ts
│   └── utils
│       ├── appUtils.ts
│       ├── creator.ts
│       ├── importer.ts
│       ├── network.ts
│       ├── pageUtils.ts
│       └── reduxMiddlewares.ts
├── tests
│   ├── .env.example
│   ├── .env.test.example
│   ├── example.test.ts
│   └── setup.ts
├── tools
│   ├── babel-register.js
│   └── importer-loader.js
├── .babelrc
├── .dockerignore
├── .env.example
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .prettierignore
├── .prettierrc
├── Dockerfile
├── LICENSE
├── README.md
├── docker-compose.yml
├── jest.config.js
├── package-lock.json
├── package.json
├── tsconfig.json
└── webpack.config.js

Find this project helpful? :heart:

• Support it by clicking the :star: button on the upper right of this page. :v:

License

Copyright (C) 2023 JANISHAR ALI ANWAR

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.