Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/saddamarbaa/phoenix-software-solution-company-nextjs

==> Building PHOENIX SOFTWARE SOLUTION Agency WebSide with React Js + Next Js + TypeScript + Styled Components + Node Js + Express + MongoDB + Socket.IO (a mobile-friendly)
https://github.com/saddamarbaa/phoenix-software-solution-company-nextjs

nextjs nodejs-express-mongodb reactjs reduxtoolkit styled-components typescript vercel

Last synced: 4 months ago
JSON representation

==> Building PHOENIX SOFTWARE SOLUTION Agency WebSide with React Js + Next Js + TypeScript + Styled Components + Node Js + Express + MongoDB + Socket.IO (a mobile-friendly)

Awesome Lists containing this project

README 

        
# www.phoenixtechteam.com



Building PHOENIX SOFTWARE SOLUTION Agency WebSide with React Js, Next Js, TypeScript, Redux, 

Styled Components, Node Js, Express, MongoDB, Socket.IO, Vercel Hosting,

with complete user authentication (a mobile-friendly).



# Table of contents



-  [Demo](#Demo)

-   [Mockup - Figma + Adobe XD Link ](#Mockup)

-  [Technologies](#Technologies)

-  [Optimizations](#Optimizations)

-  [Status](#status)

-  [Features](#Features)

-  [Run Locally](#Run_Locally)

-  [Environment Variables](#Environment)

-  [Screenshots](#Screenshots)



# Mockup 

##   Figma Link 

##   Adobe XD Link (Admin Dashboard) 



# Technologies



**Client:**



-  React Js

-  Next Js

-  TypeScript

-  Redux

-  Styled Components

-  Material UI



**Server:**



-  Node Js

-  Express

-  MongoDB

-  Vercel Hosting

-  Socket.IO

-  JSON Web Token



# Demo



## LIVE DEMO

## LIVE DEMO



# Optimizations



-  Next' Js Image component

-  Next' Js file-system based router

-  Next' Js Server-side rendering

-  Memoization (useMemo, Memo)

-  Function components

-  React hooks

-  React useEffect cleanup

-  TypeScript

-  TODO



# Features



-  TODO



# Run_Locally



Clone the project



```bash

https://github.com/saddamarbaa/phoenix-software-solution-company-nextjs

```



Go to the project directory



```bash

  cd phoenix-software-solution-company-nextjs

```



Install dependencies



```bash

  npm install

```



Start the server



```bash

npm run dev

# or

yarn dev

```



# Environment



- TODO



# Status



Project is In progress



# Screenshots



 ## Home Page

![image](https://user-images.githubusercontent.com/51326421/139734370-5053543b-702e-4def-83bc-ffd99b065579.png)



 ## Work Page

![image](https://user-images.githubusercontent.com/51326421/139734689-b1e269bf-bba2-463e-ac93-15481db18f46.png)



 ## Work Detail Page

![image](https://user-images.githubusercontent.com/51326421/139736101-76b86317-2d4d-48e1-9e53-3ee0e1b54e73.png)



 ## Services Page

![image](https://user-images.githubusercontent.com/51326421/139734937-cd2017ed-fb7d-42bc-b7f4-b1cd5b6db031.png)



 ## Blog Page

![image](https://user-images.githubusercontent.com/51326421/139735089-dbdb7366-f3b9-496e-8921-11e2d5733185.png)



 ## Blog Detail Page

![image](https://user-images.githubusercontent.com/51326421/139736356-dac26ce1-f469-4fd1-bc01-eaa6d16f8cc5.png)



 ## About Us Page

![image](https://user-images.githubusercontent.com/51326421/139735264-2a8dbc62-c3e4-415f-9fea-9d6512567c6d.png)



 ## Contact Page

![image](https://user-images.githubusercontent.com/51326421/139739990-2a29413f-f30c-4cb0-8e9b-3b1224688cdc.png)



 ## Contact Page(Form Validatio)

![image](https://user-images.githubusercontent.com/51326421/139740121-2601adc9-558e-4742-a239-b7534b7ea6ed.png)



 ## Hire Us Page

![image](https://user-images.githubusercontent.com/51326421/139736520-651d6294-b082-4523-a7b6-838247e2818a.png)



## Hire Us Page (Form Validatio)

![image](https://user-images.githubusercontent.com/51326421/139741452-2a05282c-fd83-4173-97ee-569c6360d405.png)



 ## Admin Dashboard

![image](https://user-images.githubusercontent.com/51326421/139740438-37a92794-45f3-45db-ac9e-017bbcab1142.png)



## Getting Started



First, run the development server:



```bash

npm run dev

# or

yarn dev

```



Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.



You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.



[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.



The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.



## Learn More



To learn more about Next.js, take a look at the following resources:



- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.



You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!



## Deploy on Vercel



The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.



Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.