initial commit

.gitignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# ide
+.idea

.tool-versions

@@ -0,0 +1 @@
+nodejs 18.5.0

README.md

@@ -0,0 +1,24 @@
+## The task
+We need to write a simple messaging application that would allow two people to exchange text messages using a web interface. It can be as simple as window with the chat history and the text input to send new messages.
+
+## The scope
+We don't need to make the UI beautiful (however, that surely helps). The primary focus should be on the logic, application structure, and sticking to programming best practices.
+
+## API
+The "backend engineers" have provided us with the basic API. In our case it is just a mock located in `src/api-mock/api.ts`. We as the frontend engineers can influence the API decisions made by the backend team. If we think that we need a better API, we can edit the mocks to make the API more suited to our task (as if we asked the backend team to do that).
+
+## Testing
+Does something need testing? What, why, and how?
+
+## Communication
+Think aloud! This help the interviewer understand your thought process and help you along the way.
+
+## Resources
+You are absolutely encouraged to use whatever resources you need. Here are just a few:
+- [React docs](https://react.dev/reference/react)
+- [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+- [Typescript](https://www.typescriptlang.org/docs/handbook/intro.html)
+- [Jest](https://jestjs.io/)
+- [React testing library](https://testing-library.com/docs/react-testing-library/intro/)
+
+# GOOD LUCK! :)

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "interview-project-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.8",
+    "@types/node": "^20.9.0",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "lucide-react": "^0.292.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "tailwind-merge": "^2.0.0",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.2.2",
+    "web-vitals": "^3.5.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.3.5"
+  }
+}