Code Monkey home page Code Monkey logo

natbibi / lennykravitz Goto Github PK

View Code? Open in Web Editor NEW

This project forked from jameswheadon/lenny_kravitz

0.0 0.0 0.0 273 KB

A Lenny Kravitz fan page built in fullstack with react on the client, flask on the server and is connected to an email service using flask-mail. Users can join the mailing list, view all albums and suggest a name and release date for a new album. Subscribers will receive a welcome email and updates of new albums.

Python 35.22% JavaScript 49.78% HTML 2.09% CSS 12.92%
flask flask-mail pytest python reactjs

lennykravitz's Introduction

Project: Flask email API and React Client

Description

A Lenny Kravitz fan page built in fullstack with react on the client, flask on the server and is connected to an email service using flask-mail. Users can join the mailing list, view all albums and suggest a name and release date for a new album. Subscribers will receive a welcome email and updates of new albums.

Document

Installation and Usage

  • Clone or download this repo

  • Navigate to root directory of this repository

  • Open the terminal and navigate to the api subdirectory

    • pipenv shell
    • pipenv install
    • pipenv run dev
    • Flask API will be running on port 5000
  • Navigate to the client subdirectory

    • npm install
    • npm run dev
    • The client will open on port 8080

To run API test suite:
pipenv run test

Technologies

  • HTML, CSS, JavaScript, Python

Dependencies:

  • Server: flask, flask-mail, flask-cors, gunicorn

  • Client: axios, react, router-dom, react-router-dom, react-icons

DevDependencies:

  • Server: pytest, pytest-cov

  • Client: babel, react-testing-library, jest

Process

  1. Decide on flow and idea and what is needed for a MVP
  2. Listen to some Lenny Kravitz music!
  3. Create seed data to be used for API
  4. Drive and navigation between collaborators
  5. Start with backend then create a front-end client
  6. Add styling and finalise!

Bugs

  • MailTrap still sending emails during testing

Changelog

React-Client

  1. Set up pages and components
  2. Use axios to set up GET request from API
  3. Implement socket.io client
  4. Styling!

API

  1. Set up server with routes and controllers
  2. Complete GET, POST routes
  3. Test!

Wins & Challenges

Wins

  • Created in one day!
  • Finding MailTrap which is a great way to test emails without using own account

Challenges

  • Testing with flask mail - mail still sending during testing
  • Switching between both Python and JavaScript!

Collaborators

@jameswheadon, @natbibi, @ravil-96

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.