├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── logo.png
    │   ├── tailwind.css
    │   └── whatsapp_background.png
    ├── components
    │   ├── chats
    │   │   ├── Header.vue
    │   │   └── Lists.vue
    │   └── messages
    │   │   └── Header.vue
    ├── main.js
    ├── router
    │   └── index.js
    └── views
    │   ├── Calls.vue
    │   ├── Chats.vue
    │   ├── Contacts.vue
    │   └── Messages.vue
└── tailwind.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
 7 |   parserOptions: {
 8 |     parser: "babel-eslint"
 9 |   },
10 |   rules: {
11 |     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
12 |     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
13 |   }
14 | };
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # whatsapp-clone
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"]
3 | };
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "whatsapp-clone",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "autoprefixer": "^9.7.5",
12 |     "core-js": "^3.6.4",
13 |     "postcss": "^7.0.27",
14 |     "tailwindcss": "^1.2.0",
15 |     "vue": "^2.6.11",
16 |     "vue-router": "^3.1.5"
17 |   },
18 |   "devDependencies": {
19 |     "@vue/cli-plugin-babel": "~4.2.0",
20 |     "@vue/cli-plugin-eslint": "~4.2.0",
21 |     "@vue/cli-plugin-router": "~4.2.0",
22 |     "@vue/cli-service": "~4.2.0",
23 |     "@vue/eslint-config-prettier": "^6.0.0",
24 |     "babel-eslint": "^10.0.3",
25 |     "eslint": "^6.7.2",
26 |     "eslint-plugin-prettier": "^3.1.1",
27 |     "eslint-plugin-vue": "^6.1.2",
28 |     "prettier": "^1.19.1",
29 |     "vue-template-compiler": "^2.6.11"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [require("tailwindcss"), require("autoprefixer")]
3 | };
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitfumes/whatsapp-clone/4adbfb31618aa59c6b6e30433e66cf16c8281da1/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
10 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
11 |       rel="stylesheet">
12 |   </head>
13 |   <body>
14 |     <noscript>
15 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
16 |     </noscript>
17 |     <div id="app"></div>
18 |     <!-- built files will be auto injected -->
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div id="app">
3 |     <router-view />
4 |   </div>
5 | </template>
6 | 
7 | <style></style>
8 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitfumes/whatsapp-clone/4adbfb31618aa59c6b6e30433e66cf16c8281da1/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/tailwind.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | 
 3 | @tailwind components;
 4 | 
 5 | @tailwind utilities;
 6 | 
 7 | .bg-wa-dark {
 8 |   background-color: #255e54;
 9 | }
10 | .bg-wa-darker {
11 |   background-color: #1f5149;
12 | }
13 | 
14 | .bg-wa-lighter {
15 |   background-color: #e3fbcc;
16 | }
17 | 
18 | .text-wa-lighter {
19 |   color: #e3fbcc;
20 | }
21 | 


--------------------------------------------------------------------------------
/src/assets/whatsapp_background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitfumes/whatsapp-clone/4adbfb31618aa59c6b6e30433e66cf16c8281da1/src/assets/whatsapp_background.png


--------------------------------------------------------------------------------
/src/components/chats/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header>
 3 |     <div class="bg-wa-darker p-3"></div>
 4 |     <div class="bg-wa-dark text-white">
 5 |       <div class="flex justify-between px-4 pt-2">
 6 |         <h1 class="text-2xl">WhatsApp</h1>
 7 |         <div class="py-2">
 8 |           <span class="material-icons px-2">search</span>
 9 |           <span class="material-icons px-2">chat</span>
10 |           <span class="material-icons pl-2">more_vert</span>
11 |         </div>
12 |       </div>
13 |       <div class="flex justify-between">
14 |         <h2 class="w-1/3 text-center p-4 text-gray-500">CALLS</h2>
15 |         <h2 class="w-1/3 text-center p-4 border-b-2 border-white">CHATS</h2>
16 |         <h2 class="w-1/3 text-center p-4 text-gray-500">CONTACTS</h2>
17 |       </div>
18 |     </div>
19 |   </header>
20 | </template>
21 | 
22 | <script>
23 | export default {};
24 | </script>
25 | 
26 | <style></style>
27 | 


--------------------------------------------------------------------------------
/src/components/chats/Lists.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="m-2 flex">
 3 |     <div class="w-2/12 py-3">
 4 |       <img :src="data.image" class="w-12 h-12 rounded-full" />
 5 |     </div>
 6 |     <article class="w-10/12 py-2 border-b-2 border-gray-200">
 7 |       <div class="flex justify-between">
 8 |         <h2 class="font-semibold">{{ data.name }}</h2>
 9 |         <p
10 |           class="text-sm"
11 |           :class="data.count > 0 ? 'text-green-500' : 'text-gray-500'"
12 |         >
13 |           {{ data.time }}
14 |         </p>
15 |       </div>
16 |       <div class="flex justify-between">
17 |         <p>{{ data.message }}</p>
18 |         <p
19 |           class="bg-green-500 text-white rounded-full w-5 h-5 text-center text-sm pb-2"
20 |           v-if="data.count > 0"
21 |         >
22 |           {{ data.count }}
23 |         </p>
24 |       </div>
25 |     </article>
26 |   </section>
27 | </template>
28 | 
29 | <script>
30 | export default {
31 |   props: ["data"]
32 | };
33 | </script>
34 | 
35 | <style></style>
36 | 


--------------------------------------------------------------------------------
/src/components/messages/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="bg-wa-dark flex justify-between text-white fixed w-full">
 3 |     <div class="p-2 flex">
 4 |       <router-link to="/">
 5 |         <i class="fas fa-arrow-left text-white py-4"></i>
 6 |       </router-link>
 7 |       <div class="px-2">
 8 |         <img
 9 |           src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80"
10 |           class="w-12 h-12 rounded-full"
11 |         />
12 |       </div>
13 |       <div class="px-2">
14 |         <h1>Whitmans Chat</h1>
15 |         <p class="text-xs">Alice, Francis, Jack, Ned, Peter</p>
16 |       </div>
17 |     </div>
18 |     <div class="py-5">
19 |       <span class="material-icons px-2 transform -rotate-45">attach_file</span>
20 |       <span class="material-icons px-2">more_vert</span>
21 |     </div>
22 |   </header>
23 | </template>
24 | 
25 | <script>
26 | export default {
27 |   props: ["data"]
28 | };
29 | </script>
30 | 
31 | <style></style>
32 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import router from "./router";
 4 | import "../src/assets/tailwind.css";
 5 | 
 6 | Vue.config.productionTip = false;
 7 | 
 8 | new Vue({
 9 |   router,
10 |   render: h => h(App)
11 | }).$mount("#app");
12 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueRouter from "vue-router";
 3 | import Chats from "../views/Chats.vue";
 4 | 
 5 | Vue.use(VueRouter);
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: "/",
10 |     name: "Chats",
11 |     component: Chats
12 |   },
13 |   {
14 |     path: "/contacts",
15 |     name: "Contacts",
16 |     component: () =>
17 |       import(/* webpackChunkName: "about" */ "../views/Contacts.vue")
18 |   },
19 |   {
20 |     path: "/calls",
21 |     name: "Calls",
22 |     component: () =>
23 |       import(/* webpackChunkName: "about" */ "../views/Calls.vue")
24 |   },
25 |   {
26 |     path: "/messages",
27 |     name: "Messages",
28 |     component: () =>
29 |       import(/* webpackChunkName: "about" */ "../views/Messages.vue")
30 |   }
31 | ];
32 | 
33 | const router = new VueRouter({
34 |   mode: "history",
35 |   base: process.env.BASE_URL,
36 |   routes
37 | });
38 | 
39 | export default router;
40 | 


--------------------------------------------------------------------------------
/src/views/Calls.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div></div>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/src/views/Chats.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ChatHeader />
 4 |     <div v-for="(chat, i) in chats" :key="i">
 5 |       <router-link to="/messages">
 6 |         <ChatLists :data="chat" />
 7 |       </router-link>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import ChatHeader from "../components/chats/Header";
14 | import ChatLists from "../components/chats/Lists";
15 | export default {
16 |   name: "Chats",
17 |   components: { ChatHeader, ChatLists },
18 |   data() {
19 |     return {
20 |       chats: [
21 |         {
22 |           image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
23 |           name: "Whitemans Chat",
24 |           message: "Ned: Yeah I think I know wha...",
25 |           time: "11:45 AM",
26 |           count: 3
27 |         },
28 |         {
29 |           image: "https://images.unsplash.com/photo-1565464027398-8f98698f6d52",
30 |           name: "Stewart Family",
31 |           message: "Steve: Great, thanks!",
32 |           time: "11:39 AM",
33 |           count: 1
34 |         },
35 |         {
36 |           image: "https://images.unsplash.com/photo-1485893086445-ed75865251e0",
37 |           name: "Alice Whitman",
38 |           message: "Image",
39 |           time: "YESTERDAY",
40 |           count: 0
41 |         },
42 |         {
43 |           image: "https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3",
44 |           name: "Jack Whitman",
45 |           message: "0:07",
46 |           time: "FRIDAY",
47 |           count: 0
48 |         },
49 |         {
50 |           image: "https://images.unsplash.com/photo-1568725624707-9d968f934b75",
51 |           name: "Lunch Group",
52 |           message: "You: Sounds good!",
53 |           time: "FRIDAY",
54 |           count: 0
55 |         },
56 |         {
57 |           image: "https://images.unsplash.com/photo-1565293253517-90cb8ce865a2",
58 |           name: "Jane Pearson",
59 |           message: "🔥 💭",
60 |           time: "FRIDAY",
61 |           count: 0
62 |         }
63 |       ]
64 |     };
65 |   }
66 | };
67 | </script>
68 | 


--------------------------------------------------------------------------------
/src/views/Contacts.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div></div>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/src/views/Messages.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <MessagesHeader :data="data" />
 4 |     <section
 5 |       class="h-screen bg-repeat pt-24"
 6 |       :style="{
 7 |         backgroundImage: `url(${require('@/assets/whatsapp_background.png')})`
 8 |       }"
 9 |     >
10 |       <article
11 |         v-for="(msg, i) in chats"
12 |         :key="i"
13 |         class="px-3 py-1 flex"
14 |         :class="msg.name == 'you' ? 'justify-end' : ''"
15 |       >
16 |         <div
17 |           class="rounded px-3 w-9/12 shadow"
18 |           :class="msg.name == 'you' ? 'bg-wa-lighter' : 'bg-white'"
19 |         >
20 |           <span
21 |             class="material-icons text-5xl absolute text-white"
22 |             :class="
23 |               msg.name == 'you'
24 |                 ? 'right-0 -mr-3 -mt-5 text-wa-lighter'
25 |                 : 'left-0 -mt-5 -ml-3'
26 |             "
27 |             >arrow_drop_down</span
28 |           >
29 |           <h1 class="text-red-500">{{ msg.name }}</h1>
30 |           <div>
31 |             <p>{{ msg.message }}</p>
32 |             <p class="text-xs text-gray-500">{{ msg.time }}</p>
33 |           </div>
34 |         </div>
35 |       </article>
36 |     </section>
37 |   </div>
38 | </template>
39 | 
40 | <script>
41 | import MessagesHeader from "../components/messages/Header";
42 | export default {
43 |   components: { MessagesHeader },
44 |   data() {
45 |     return {
46 |       chats: [
47 |         {
48 |           name: "Francis Whitmans",
49 |           message: "😜😝 Anyone who want to tag alone is more than welcome",
50 |           time: "11:39 AM"
51 |         },
52 |         {
53 |           name: "you",
54 |           message: "🚤🏊🏄⛵🚣🌅💭",
55 |           time: "11:42 AM"
56 |         }
57 |       ]
58 |     };
59 |   }
60 | };
61 | </script>
62 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   theme: {
3 |     extend: {},
4 |   },
5 |   variants: {},
6 |   plugins: [],
7 | }
8 | 


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