Git Product home page Git Product logo

17f-miam's Introduction

MiAM

MiAM is a social media app in which users can generate memes easily, share them freely under their username or anonymously, remix/re-edit likable memes, follow favorite meme-masters, and participate in meme battles. The app also has a reward system and keeps track of the user profiles and their meme battles.

Mock Up

See our original mock-ups: [link]

Architecture

Frontend:

  • React Native
  • Deployment: Expo

Backend:

  • MongoDB (Database)
  • ExpressJS
  • Node with Babel
  • Deployment: Heroku

Setup

Assuming Node.js and Node Package Manager (npm) has been downloaded and installed:

  1. Download Expo XDE from app store or the Internet
  2. npm install exp --global
  3. git clone https://github.com/dartmouth-cs98/17f-miam.git
  4. cd 17f-miam/miam
  5. npm install
  6. cd node_modules/react-native-keyboard-aware-view
  7. rm -rf node_modules
  8. Open up Expo XDE. Click "Open Existing Project" and navigate to 17f-miam/miam. Select this file.
  9. Once the message "Project opened!" appears in the XDE console, click on the "Device" button at the top right of the window and click on "Open on iOS Simulator".
  10. After the scripts finish loading, have fun :)

Deployment

The frontend was deployed on Expo XDE during development. The app is now available on the Apple iOS store! Type in "MIAM Make it a Meme" to find it.

The backend was deployed on Heroku. To learn more about it, follow this link to the github page: [link]

Demo

The Feed and Commenting:

MiAM Editor:

MiAM Meme Battle:

MiAM Meme Remixing:

End of Class Summary:

1. What worked and didn't work:

  • What worked:
    • The core features that we wanted to incorporate into our app (i.e. the meme editor, meme battles, befriend/following users) were implemented into the app.
    • We were able to better split up the tasks between group members who wanted to work on particular parts of the app they wanted to code.
    • Going back into coding in January and being more familiar with React Native, we were able to code more efficiently. In addition, we were able to better understand the limitations of React Native and find work arounds.
    • We were able to hold some meetings online through software like Slack and Skype.
    • Github issues were a better way to keep track of bugs, features, and other notes on our project rather than keeping them in our heads.
    • We were able to finally publish our app onto the Apple iOS store!
  • What didn't work:
    • Although github milestones were eventually met, they didn’t necessarily push us to finish issues by a certain date.
    • We were unable to get a stable Android build.

2. Brief summary of any insights from user testing / conclusions drawn:

  • Overall, it seemed that many enjoyed using the app during demo day, especially the core features (i.e. editor and meme battle). We even got some people to download the app and post some dank memes.
  • Nonetheless, we did receive some feedback providing pointers to increase the convenience of using out app. For example:
    • When adding a text object to the meme, automatically go into text editing mode.
    • Use an color palette instead of sliders for change text color.
    • Instead of a chat feature, use polling instead for battles.
    • "GIVE ME ANDROID VERSION"
  • In conclusion, people enjoyed the concept and wish to see the app grow.

3. Any potential next steps (if you were going to take this further):

  • We noticed that the Heroku web server we use goes to sleep after some inactivity. Thus, when someone opens the app for the first time in awhile, it takes around 10-20 seconds for the app to receive data from the server. Thus, in order to prevent this, we could move to a different web server provider.
  • A professor mentioned that a student who graduated some time ago was coming to visit Dartmouth in April. We were told he had created a startup that was creating an app similar to ours and could approach him to get more feedback on how to better scale our app.
  • We would advertise our app onto the Dartmouth Meme Facebook Page to increase the number of users on our app to better find bugs and improve user experience. In addition, we could implement some features users would like to see.

4. What would have made this a better experience?

  • There was some minor compatibility issue with styling and keyboard in iphone x. We could have adjust the style according to different devices.
  • In the notification center, it would be more user-friendly is the user can be directed to other users profile. This functionality only exists in the posts section.

Authors

  • Nicole Chen
  • Weijia Tang
  • Sophia Jiang
  • Edward Camp
  • Nina Liu

Acknowledgments

Thanks Tim for helping us along the way these last two terms!

17f-miam's People

Contributors

nikoruchen avatar sophiajxw avatar yingliugh avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

17f-miam's Issues

Bottom Bar Icons

I think the app looks really nice at the moment, but from your mockups it's a little unclear what the bottom bar icons mean. The plus and the user icon make logical sense but I'm not sure what the star, trophy, and crown would lead to.

Integrations

Maybe it would be nice to integrate these with other apps that people can share memes on. Another thought might be to pull in standard photos that are popularly used in memes and index based on theme for inspiration.

Exports

Would be helpful to be able to export memes create to images to share in that way

Realtime Chat

the chat is not real time, we might have to introduce socket or pusher.

Anonymous posting

I love the idea of having profiles, so people can take ownership of their creations :)

I think when you build out the "post" functionality, you can have a toggle where users can decide to post from their username or anonymously. If you do this-- I think you should keep in mind still presenting that meme to the users as they view their own profiles, so there is some ownership for deleting the content.

Meme template?

Super cute! Would there/Could there be a meme template where all you need to add is text?

Search bar

When I talked with your group, y'all mentioned meme battles. What exactly would that look like? How would the battle meme page link up with the main page?

search

I really like your project - and your mockups look great!! I'm wondering how the search functionality would work since the option is in the top bar, and if you guys considered putting the search option in the bottom bar instead. Perhaps it could be switched with the profile, or the trophy/crown (although I'm not sure what those do).

Password should not be shown

The app should have some authentication method that hides your password and stores it in a secure fashion. When I typed in my password, I originally used my real password, which posed a security risk.

add a dagger/headshot button to voting

If there's a meme that's especially good you should add the ability to designate that one as a dagger/headshot and you could end the battle after one or two of those are sent by and individual

notifications

Maybe later add a notification component where users get notified when they've been challenged/if there's a battle going on that they should join

Challenge feature

I think that this feature is really fun + interesting and has a lot of potential. It's unclear how you would go about "challenging" another people, though.

Hottest tab

How do the memes on the "hottest" tab get recycled? Is it all time or does it reset after a certain amount of time?

Canvas page

For the canvas page, I think it would look better if you had some background for the "Canvas" title. I think it would just make it stand out a bit more.

Color Scheme

Not a huge of the purple, fonts look good though. More clarity around the canvas as well please!

Password input fields are visible

The password input fields currently show the text which it shouldn't. It also autocorrects and capitalizes, which you don't want in the email or password field.

Search

  • Consider placing search elsewhere and isolating newest and hottest
  • What would search functionality actually look like? Am i searching by users or are memes tagged?

scrolling between tabs

when you hit a button on the nav bar at the bottom, it does the moving animation even if it is the current tab

[Mockups] Unclear bottom navigation

The mockup doesn't make it that clear what the bottom navigational elements mean. What is the difference between the crown and the trophy? Also in the actual implementation, you'll want more space for the top bar options, as it will be hard to distinguish taps of labels/buttons that are that narrow.

challenge?

I'm a little confused about how a battle works... is it the number of followers?

Meme Feed View

  • Filter (by hashtags, location)
  • Sort (by timestamp, votes)
  • A list of memes posted within 10 mile radius in the area
  • Votes, comments, hashtags, timestamp
  • Meme remake button to direct to the editor view
  • Optional username display (either anonymous or with author username)

Add ability to edit text + switching between view animations

  1. Would be awesome to be able to edit the dummy text that is pasted over each meme once you get your front end and back end talking
  2. Switching between views (by clicking the nav buttons at the bottom) shows an animation of one view card sliding into another even when the button clicked is the one we're currently on

Expanded views

It'd be nice to see what the trending posts and meme battles are going to look like! The general feed looks nice and clean, but I'm wondering if the other tabs will have a different structure -- will trending posts be organized by the number of likes, or by timestamp? Will there be sub-categories of memes under which people post new content? What's the interface for searching for and joining group going to look like?

Some general thoughts

For the battles won - can you have specific groups where you can set battles? set time for how long a battle lasts? does every person in the group have to participate? are scores scaled i.e. if someone has many many followers and wins a battle, would their score be scaled down whereas if a user with fewer followers wins a battle would this be scaled up - maybe an asymptotic score curve

not a big fan of the colors

also would like to see multiple memes per page maybe think about different ways you can display and group together on the screen 👍

looks really good!

Meme battles

how will you deal with potentially inappropriate public conversations?

Trending Memes View

  • A list of hottest memes in the area
  • Search by themes/topics (politics, culture, funny…)
  • Map to show the top meme in the area

Meme Creation Page

Nice mockups. On the page where you add new memes, I think there should be a button that allows you to toggle your sharing options like just sharing with your friends or sharing globally or just making this meme privately.

Editing seems complicated / unintutive

The editing tools seem to be quite complicated compared to the competition's layout and flow. Maybe consider an interface similar to the iOS photos editor.

List of shareable websites?

What websites can the users share to? How granular does it go? (Ex: when you create a meme, do you upload it to Facebook, or a specific Facebook group)

More clarity re. the sharing experience and the website you're sharing to (e.g. where in Canvas? what website options do I have?) would be great!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.