├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── chats.js
    └── index.js
├── public
    ├── favicon.ico
    └── vercel.svg
└── styles
    ├── auth.css
    ├── chats.css
    └── index.css


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | 
21 | # debug
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 
26 | # local env files
27 | .env.local
28 | .env.development.local
29 | .env.test.local
30 | .env.production.local
31 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # NextJS Chat Tutorial
 2 | 
 3 | <img 
 4 |     src="https://raw.githubusercontent.com/alamorre/nextjs-chat-app/main/assets/nextjs-chat-tutorial.png" 
 5 |     width="75%" 
 6 |     height="100%"
 7 | />
 8 | 
 9 | This project is powered by [Chat Engine](https://chatengine.io).
10 | 
11 | ## Tutorial Setup
12 | 
13 | Download Code > Zip from [the main branch](https://github.com/alamorre/nextjs-chat-tutorial/).
14 | 
15 | Follow the Video Tutorial [right here](https://chatengine.io).
16 | 
17 | Push to your own repo and link to [vercel](https://vercel.io).
18 | 
19 | ## Setup Finished Project
20 | 
21 | For the finished version of this project, go to [the last branch](https://github.com/alamorre/nextjs-chat-tutorial/tree/3-chats).
22 | 
23 | Go to [Chat Engine](https://chatengine.io) and create a account and project.
24 | 
25 | Find the Private Key `c2f82e63-9978-4c5c-9c17-8b0dec845dc6` and Project ID `b60a6d8b-d377-477e-af88-e47de35b3e89` then replace the values with your API keys.
26 | 
27 | The project has been deleted so those keys won't work anymore.
28 | 
29 | ### `yarn dev`
30 | 
31 | Install everything with `yarn` then run `yarn dev` to get up and running.
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "learn-starter",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "next": "^11.0.0",
12 |     "react": "17.0.2",
13 |     "react-dom": "17.0.2"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import "../styles/auth.css";
 2 | import "../styles/chats.css";
 3 | import "../styles/index.css";
 4 | 
 5 | // import { ContextProvider } from '../context'
 6 | 
 7 | export default function App({ Component, pageProps }) {
 8 |   return (
 9 |     // <ContextProvider>
10 |     <Component {...pageProps} />
11 |     // </ContextProvider>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/pages/chats.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | export default function Chats() {
4 |   return <div className="background">chats</div>;
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | export default function Auth() {
4 |   return <div className="background">auth</div>;
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alamorre/nextjs-chat-tutorial/bdb2a9314cfac1167c0bc04f13b347f2d62ee76c/public/favicon.ico


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/styles/auth.css:
--------------------------------------------------------------------------------
 1 | .background {
 2 |   padding: 100px;
 3 |   position: absolute;
 4 |   top: 0px;
 5 |   left: 0px;
 6 |   width: calc(100vw - 200px);
 7 |   height: calc(100vh - 200px);
 8 |   background: linear-gradient(150deg, #d9dbe2, #808aac 100%, #282d39 0);
 9 | }
10 | 
11 | .auth-container {
12 |   width: 420px;
13 |   height: 292px;
14 |   position: relative;
15 |   top: calc(50vh - 144px - 100px);
16 |   left: calc(50vw - 240px - 100px);
17 |   background-color: #4a5162;
18 |   border-radius: 24px;
19 |   box-shadow: 0 2px 15px rgb(0 0 0 / 68%);
20 | }
21 | 
22 | .auth-form {
23 |   padding-top: 33px;
24 |   width: 60%;
25 |   margin-left: 20%;
26 | }
27 | 
28 | .auth-title {
29 |   padding-bottom: 20px;
30 |   width: 100%;
31 |   text-align: center;
32 |   color: white;
33 |   font-size: 26px;
34 | }
35 | 
36 | .text-input {
37 |   width: 100%;
38 |   padding: 8px;
39 |   margin-bottom: 24px;
40 |   background-color: #4a5162;
41 |   outline: none;
42 |   border-width: 0px;
43 |   border-bottom: 2px solid #726dfe;
44 |   color: white;
45 | }
46 | 
47 | .text-input::placeholder {
48 |   color: hsla(0, 0%, 100%, 0.568);
49 | }
50 | 
51 | .submit-button {
52 |   width: 100%;
53 |   padding: 14px;
54 |   border-radius: 4px;
55 |   border-width: 0px;
56 |   cursor: pointer;
57 |   background-color: #726dfe;
58 |   color: white;
59 |   outline: none;
60 | }
61 | 
62 | .submit-button::hover {
63 |   background-color: #938ffe;
64 | }
65 | 


--------------------------------------------------------------------------------
/styles/chats.css:
--------------------------------------------------------------------------------
  1 | .shadow {
  2 |   box-shadow: 0 2px 15px rgb(0 0 0 / 68%);
  3 | }
  4 | 
  5 | /* Chat List */
  6 | .ce-wrapper {
  7 |   background-color: #4a5162 !important;
  8 | }
  9 | 
 10 | .ce-chats-container {
 11 |   background-color: #4a5162 !important;
 12 |   border-radius: 0px !important;
 13 | }
 14 | 
 15 | .ce-chat-form-container {
 16 |   background-color: #4a5162 !important;
 17 |   color: white;
 18 | }
 19 | 
 20 | .ce-chat-card {
 21 |   margin: 0px 6px !important;
 22 | }
 23 | 
 24 | .ce-chat-card-loading-bar {
 25 |   background-color: #535a6d !important;
 26 | }
 27 | 
 28 | .ce-active-chat-card {
 29 |   background-color: #726dfe !important;
 30 | }
 31 | 
 32 | .ce-chat-title-text {
 33 |   color: white !important;
 34 | }
 35 | 
 36 | .ce-chat-subtitle-text {
 37 |   color: hsla(0, 0%, 100%, 0.568) !important;
 38 | }
 39 | 
 40 | .ce-chat-unread-dot {
 41 |   background-color: white !important;
 42 | }
 43 | 
 44 | /* Chat Feed */
 45 | 
 46 | .ce-chat-title-container {
 47 |   background-color: #4a5162 !important;
 48 |   border-radius: 0px !important;
 49 | }
 50 | 
 51 | .ce-chat-feed-container {
 52 |   background-color: #4a5162 !important;
 53 | }
 54 | 
 55 | .ce-primary-button {
 56 |   background-color: #9a97fc !important;
 57 | }
 58 | 
 59 | .ce-message-date-text {
 60 |   color: hsla(0, 0%, 100%, 0.568) !important;
 61 | }
 62 | 
 63 | .ce-my-message-bubble {
 64 |   background-color: #726dfe !important;
 65 | }
 66 | 
 67 | .ce-my-message-sinding-bubble {
 68 |   background-color: #938ffe !important;
 69 | }
 70 | 
 71 | .ce-my-message-timestamp {
 72 |   color: #9a97fc !important;
 73 | }
 74 | 
 75 | .ce-their-message-timestamp {
 76 |   color: hsla(0, 0%, 100%, 0.568) !important;
 77 | }
 78 | 
 79 | #ce-send-message-button {
 80 |   background-color: #9a97fc !important;
 81 | }
 82 | 
 83 | #ce-ice-breaker-gif {
 84 |   max-width: 115px !important;
 85 |   margin-top: 30px !important;
 86 | }
 87 | 
 88 | .ce-social-message-form {
 89 |   background-color: #4a5162 !important;
 90 | }
 91 | 
 92 | .ce-message-input-form {
 93 |   padding-bottom: 10px !important;
 94 | }
 95 | 
 96 | #msg-textarea {
 97 |   width: calc(100% - 140px) !important;
 98 |   position: relative !important;
 99 |   top: 4px !important;
100 |   border-width: 0px !important;
101 |   background-color: #4a5162 !important;
102 |   color: white !important;
103 | }
104 | #msg-textarea::placeholder {
105 |   color: hsla(0, 0%, 100%, 0.568) !important;
106 | }
107 | 
108 | #ce-upload-document-icon {
109 |   color: white !important;
110 | }
111 | 
112 | .ce-feed-container-bottom {
113 |   height: "44px";
114 | }
115 | 
116 | .ce-message-images-row {
117 |   background-color: #4a5162 !important;
118 | }
119 | 
120 | .ce-their-message-sender {
121 |   color: hsla(0, 0%, 100%, 0.568) !important;
122 | }
123 | 
124 | .ce-their-message-bubble {
125 |   background-color: #535a6d !important;
126 |   color: rgba(255, 255, 255, 0.705) !important;
127 | }
128 | 
129 | /* Chat Settings */
130 | 
131 | .ce-settings {
132 |   background-color: #4a5162 !important;
133 |   border-radius: 0px !important;
134 | }
135 | 
136 | .ce-chat-title-form .ce-text-input {
137 |   background-color: #4a5162;
138 |   color: white;
139 | }
140 | 
141 | .ce-section-title-container {
142 |   background-color: #4a5162 !important;
143 |   color: white;
144 | }
145 | 
146 | #ce-options-drop-down {
147 |   background-color: #4a5162 !important;
148 |   color: white;
149 | }
150 | 
151 | .ce-person-text {
152 |   color: hsla(0, 0%, 100%, 0.568);
153 | }
154 | 
155 | .ce-danger-button {
156 |   background-color: #4a5162 !important;
157 |   border: 1px solid #9a97fc !important;
158 |   color: #9a97fc !important;
159 | }
160 | 
161 | .ce-autocomplete-close {
162 |   background-color: white !important;
163 |   border-radius: 0px !important;
164 | }
165 | 


--------------------------------------------------------------------------------
/styles/index.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@600;700&display=swap");
2 | 
3 | * {
4 |   font-family: Quicksand !important;
5 | }
6 | 


--------------------------------------------------------------------------------