Movie Chit Chat - An app to chat & discuss on latest movies with your friends & family - AWS Amplify Hackathon
Have you ever thought where you can share your thoughts on your fav. & latest movies? I've an awesome app where you can share your words.π¬
A little bit about myself π
Hello there π. I'm Akshat. I'm an Android & Flutter Developer, currently a student with great discipline towards software development and passionate about building excellent applications specially product based app that improves the lives of those around me and trying to learn beside tech. Are you ready to see my project journey for AWS Amplify x Hashnode ? Here we go...
Little bit about background
As usual I was scrolling through my Twitter feed and found about that Hashnode is back again with another awesome Hackathon with #AWSAmplify #AWSAmplifyHackathon, I knew I was already too late to start but I still wanna try.
I thought of making something similar like Chat System but something different too so I came up with an idea, that why not an Chat based application based on discussing about latest movies, talk with other people's all around the world and other side of the countries.
Movie Chit Chat - An app to chat & discuss on latest moviesπ¬
Before starting with the project I started with the UI designing and sketched some of the main screens using Figma to get a little bit of knowledge of getting started with development side.
App Features π¬
- Splash - Starting with Beautiful Splash Screen
- Welcome - To welcome & check where user should go
- Login - Allow the user to login
- SignUp - Allow the user to sign up
- Home - User can see all the recent movies group
- Chat - User can chat with other people's on particular movie group
- Settings - Can switch between theme of app
- Movie Detail - To see particular movie details
This is how Figma Designs looks like :
Tech Stack π
- Dart
- Flutter
- MVVM
- Android
- AWS Amplify
This is how model's looks like :
factory User({String? id, String? email, String? userName}) {
return User._internal(
id: id == null ? UUID.getUUID() : id,
email: email,
userName: userName);
}
factory Message({String? id, String? fromUsername, String? fromId, String? movieId, String? timestamp, String? message}) {
return Message._internal(
id: id == null ? UUID.getUUID() : id,
fromUsername: fromUsername,
fromId: fromId,
movieId: movieId,
timestamp: timestamp,
message: message);
}
factory Movie({String? id, String? img, String? rating, String? title, String? overview, String? recentMessage, String? recentMessageTim}) {
return Movie._internal(
id: id == null ? UUID.getUUID() : id,
img: img,
rating: rating,
title: title,
overview: overview,
recentMessage: recentMessage,
recentMessageTim: recentMessageTim);
}
Challenges and how I sloved them π
Firstly after sketching UI Designs the most difficult thing for me is to set movie details to database like how can I send recent/latest movies to database because manually inserting one by one movie details to database is kind of time taking process so I thought of inserting though TheMovieDB API, Thanks to Guys on YouTube with their great video's.
One more unique/useful feature, It's really cool like we can change the chat list of app from latest movies to anything e.g. Recent News, Animes, Famous Person and many more just by sending data to database though calling api by these snippet of code :
With this little node.js snippet I inserted movies to database
// api and dynamodb setup
var req = require('request');
require('isomorphic-fetch');
// api params
const movieApiParams = {
url: 'https://api.themoviedb.org/3/movie/upcoming?api_key=**Api_key**&language=en-US',
headers: { 'Content-Type': 'application/json' },
};
req.post(movieApiParams, function(err, res, body) {
if(err){
console.log('------error------', err);
} else{
// parse response body as json
const result = JSON.parse(body);
// set movieList variable
const movieList = result.results;
// define movies array
const moviesToBeInserted = [];
// loop through movieList and create movie obj
// add obj to movieList to insert into dynamodb
for (var i = 0; i < movieList.length; i++) {
var requestBody = JSON.stringify({ query: `
mutation MyMutation {
createMovie(input: {img: "` + movieList[i].poster_path + `", recentMessage: "", recentMessageTim: "", overview: "` +movieList[i].overview +`", rating: "`+ String(movieList[i].vote_average) + `", title: "` + movieList[i].title + `"}) {
img
recentMessage
recentMessageTim
overview
rating
title
}
}`
})
console.log(requestBody)
fetch('**aws_amplify_apikey**', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'x-api-key' : '**aws_amplify_apikey**' },
body: requestBody,
})
.then(res => res.json())
.then(res => console.log(res));
};
}
});
Future Improvements π
- Improvement of overall application UI in all forms
- Adding more features to app like auto updating latest movies
- User Details and check other user's profile
- Multiple category of movies to discuss on it
Source Code
If you want to see the source of the app, then here is the link to GitHub Repository of the Movie Chit-Chat
Download the Movie Chit-Chat Apk
Extra - If you want to contribute to Movie Chit-Chat then Feel free to contribute and raise issues if you find any.
Thanks to super people
I would like to say thanks to every single person of Hashnode to organize Hackathon with AWS Amplify and Hashnode Discord Server people's to help on little things. Big thanks to Multiple Youtube channels.
#AWSAmplify #AWSAmplifyHackathon