Table of Contents
Folder Structure
Project structure for both server and client:
server-graphql-prisma/
node_modules/
package.json
.envexample
.eslintrc.json
.graphqlconfig.yml
database/
datamodel.graphql
prisma.yml
src/
generated/
prisma.graphql
resolvers/
Mutations/
auth.js
category.js
events.js
index.js
Queries/
categories.js
events.js
index.js
info.js
users.js
Subscriptions/
index.js
newDislike.js
newEvent.js
newLike.js
newUser.js
AuthPayload.js
CategoryFeed.js
EventFeed.js
UserFeed.js
utils/
authenticated.js
email.js
upload.js
index.js
schema.graphql
web-client/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
assets/
fonts/
NotoSerifSC-Black.otf
NotoSerifSC-Bold.otf
NotoSerifSC-ExtraLight.otf
NotoSerifSC-Light.otf
NotoSerifSC-Medium.otf
NotoSerifSC-Regular.otf
NotoSerifSC-SemiBold.otf
components/
Admin/
AdminCategoriesManagement/
AdminCategoriesManagement.js
AdminDashboard/
AdminDashboardUtility/
AdminDashboardAreaChart.js
AdminDashboardBarChart.js
AdminDashboardPieChart.js
AdminDashboardStats.js
AdminDashboard.css
AdminDashboard.js
AdminDashboard.scss
AdminEventsManagement/
AdminEventsManagement.js
AdminLayout/
AdminLayoutUtility/
AdminLayoutFooter.js
AdminLayoutHeader.js
AdminLayoutSidebbar.js
AdminLayout.css
AdminLayout.js
AdminLayout.scss
AdminUsersManagement/
AdminUsersManagementUtility/
AdminUsersManagementMedia.js
AdminUsersManagementModal.js
AdminUsersManagement.css
AdminUsersManagement.js
AdminUsersManagement.scss
Client/
LandingPageLayout/
LandingPageLayout.js
LoginLayout/
LoginLayout.css
LoginLayout.js
LoginLayout.scss
Global/
Button/
Button.css
Button.js
Button.scss
Card/
Card.js
Dropdown/
Dropdown.js
Error/
ErrorUI.js
Input/
Input.js
Loader/
Loader.css
Loader.js
Loader.scss
Logo/
Logo.css
Logo.js
Logo.scss
Modal/
Modal.js
Pagination/
Pagination.js
Helpers/
AuthService.js
WithAuth.js
Pages/
AdminPage.js
LandingPage.js
LoginPage.js
NotFoundPage.js
PortalPage.js
SignupPage.js
routes/
index.js
styles/
scss/
base/
_base.scss
_mixins.scss
_typography.scss
_variables.scss
components/
Admin/
AdminDashboard/
_AdminDashboard.scss
AdminLayout/
_AdminLayout.scss
AdminUsersManagement/
_AdminUsersManagement.scss
Client/
LoginLayout
_LoginLayout.scss
Global/
Button/
_Button.scss
Loader/
_Loader.scss
Logo/
_Logo.scss
_index.scss
utilities/
constants.js
Apolloclient.js
index.css
index.js
index.scss
serviceWorker.js
Further instructions for client side of things
For the project to build, these files must exist with exact filenames:
public/index.htmlis the page template;src/index.jsis the JavaScript entry point.
From the entry file, which is src/index.js. The router component goes in. This router components loads different pages pending on the chosen routes. Some routes are however public while some are not. The AdminPage component for instance is private and needs admin permission to access its content. This AdminPage components does two things- one it takes you to the AdminLayout area if user is authenticated and has the right permission, two, it redirect user to the login page if not authenticated or permitted to view admin page. If user is authenticated they can view the AdminLayout and subsequent inners screens available. So in the Admin area, the AdminLayout component serves as a new entry point for the remainder of the admin components...
Available Scripts For Client
For the client side of things, Inside the root directory (web-client), you can run:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
npm test
Launches the test runner in the interactive watch mode.
npm run build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
npm run watch-css
To compile all scss extension files to css run this script
npm run build-css
To compile all scss extension files to css and also minify them run this script
Available Scripts For Server
For the server side of things, Inside the root directory (server-graphql-prisma), you can run:
npm start
Runs the app in the development mode.
Open http://localhost:4000 to view it in the browser.
npm run db-deploy
Run this script to deploy prisma schema to remote server.
npm run graphql-playground
Run script to see a browser view of graphql docs and queries
npm run dev
Run script to start server and boot up graphql playground at the same time.
npm run lint
Run script to check all lint errors and fixes. Read more on ESLint docs
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent