This is a coding challenge project made for a Codemate as a job applicant. Name of a project is heavily inspired by the company. =) Project requirement was just to make a basic frontend design/coding and a mockup JSON server (messages transfered with a REST API and JSON format). I took some more advanced approach and wanted to take a little more privileges to create also a small backend with user credentials login and a MongoDB as database. Note: This coding challenge was my first touch with a React and Redux, so there might be some not so best practices, but still I loved it. ❤️
-
What this project showed to me?
- You can learn everything with a hard work and motivated mind.
- There were some smaller obstacles and some huge obstacles that required a lot of research and reading, but I found a ways to solve these problems and that alone keeps your mind motivated.
- A lot of JavaScript. :)
- User authentication can really frustrate you.
-
What next?
- Well hopefully this coding challenge is enough to get a job that I really love. And making this project I got an confirmation that this is the right track. I just love design and coding. Problem solving is something that really keeps my mind brisk and I like the feeling when I finally solve those problems.
- This project I might improve later with a changing Socket.io to handle messaging and maybe some smaller features just for a fun and exercise.
- I'm gonna keep learning everything that I can about React and keep training myself to come a better developer/designer/problem solver. I just loved React more after using Angular 2.
Mobile responsive and designed mobile first. Chatmate uses REST API to send and receive messages. Messages are fetched every 5 seconds from a server. Users can login and register with their unique email address. Gravatar images are used from a Gravatar service, if users has registered an account there. Same email required ❗ Username is possible to change later, but email cannot be changed. Socket.io is used to keep track of a joining chat users and displaying on a sidebar. (Later it might be used to transfer messages also)
Users can choose a theme color from a four different colors. Font size is possible to change and all these changes are saved to user profiles. Chat supports markdown, emoticons, youtube video embeds and Twitter hashtags
- Visual Studio Code
- Eslint + Airbnb
- ...many others...
- Webpack 2 with middlewares
- Babel for ES6 → ES5
- Sass as CSS-preprocessor
- React
- Redux
- Socket.io
- Highlight.js
- Normalize.css
- Linkifyjs
- React-alert
- React-emojione
- React-fontawesome
- React-Gravatar
- Remarkable
- Node
- Express
- MongoDB
- Mongoose
- Axios
- Bcrypt
- Passport
- Digital Ocean droplet
- Nginx with proxy
- SSL from Let's Encrypt
- Google Analytics
- Add unit testing (Mocha, Enzyme... )
- Add infinite loading
- Embed images to chat messages
- Use Socket.io to deliver messages instead of a rest api.
- Possibly porting to Electron and Cordova.
- "Mika Vesasto" locheed@gmail.com